• ベストアンサー

CSSの変わった記述方法の意味を教えてください。

先日、CSSの記述方法で以下の書き方を見つけました。 input[type=checkbox] { 何とかかんとか… 何とかかんとか… } この[] で囲まれた部分の記述方法ですが、これはどういった意味でしょうか？ 何となく、inputのtypeはcheckboxなので、checkboxのみに有効に見たいな感じだと思うのですが…。 具体的に[] で囲む場合の使い方を教えていただけないでしょうか。 よろしくお願いします。

  • CSS
  • 回答数1
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

input { } とすると 全てのinputタグが対象になりますが [属性=属性値] をつけることで inputタグのうち、この属性がその属性値を持っているものだけを対象にする と言うことができます http://www.webword.jp/cssguide/basic/ この辺がまとめられているかも？

yuyukina
質問者

お礼

有難う御座います。 URL大変参考になりました。 色々と細かな定義があるのですね、勉強になりました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSの記述方法について

    スタイルシートに以下のような記述がありました。 *html .mainPanel input{margin:-10px 0 0 0;} 例えば、 .largefont{font-size:300%; line-height:100%} といった記述方法なら分かるのですが、 *html　.クラス名 といった記述の意味することは何でしょうか？

    • ベストアンサー
    • HTML
  • あの<TABLE>で良く使う記述と同じ意味のCSS

    よくつかうテーブルの記述、 <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> これと同じ意味合いをもつCSSの記述の方法はどうかくのでしょうか？ border:0とpadding:0の指定だけでは、明らかに足りてない（CELLSPACINGに相当する部分が不足している）と思うのですが、、、どのように記述したら良いのでしょう。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部cssの記述方法について

    よろしくお願いします。 cssを外部リンクにしたくご質問をさせて頂きました。 まず、始めにフォルダの構成ですがWフォルダというのがあります。 その中に、１というフォルダがあります。 その１フォルダの中にトップページが入っています （直下に置きたくないため） そのトップページのcssを外部リンクにするために以下の記述を<head>～</head>内にしました。 <link href="1.css" rel="stylesheet" type="text/css" media="all" />　　←inde.htmlにのみ適用したいcss <link href="commonness.css" rel="stylesheet" type="text/css" media="all" />　←全てのページに共通に適用したいcss 上記の記述で、cssファイルは１フォルダの中に保存しました。これですとcssは適用されるのですが これを１フォルダの中にcssフォルダを作成して、cssファイルを cssフォルダに保存して以下のように記述すると cssが適用されなくなってしまいます。 <link href="css/1.css" rel="stylesheet" type="text/css" media="all" />　←inde.htmlにのみ適用したいcss <link href="css/commonness.css" rel="stylesheet" type="text/css" media="all" />　←全てのページに共通に適用したいcss また、別のページですが、１フォルダの中にaというフォルダを作成してtest1.htmとtest2.htmlが入っております。 その際ですが、commonness.cssは共通で適用させたく、更にはtest1.htmとtest2.htmlにのみ適用させたいcssもあるのですが htmlへの記述方法がいまいち理解出来ずご質問をさせていただきました。 私は、Wというフォルダにcssというフォルダを作成して、その中に全てのcssファイルを保存しようと考えていたのですが、考え方が間違っておりますでしょうか？ 共通に適用させたいページが保存してあるフォルダの中全てに、commonness.cssファイルを保存した場合、 いざ、編集する際に全てのcssを編集しなければならなく、それでは外部cssにする意味が無いと思うのですが やはり、そうでしょうか？ うまく、説明が出来ないのですが、どなた様かご指導の程よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでinputのtypeの設定

    閲覧ありがとうございます。 CSS・htmlにまったく知識がありません。 CSSで以下のような例は機能しますか？ input { type: number; } 現在、htmlでinputのtypeを変更したいのですが、 その方法がCSSファイルの読み込みだけなので例の記述をしたファイルを用意したのですが、まったく機能せず。 もとのhtmlにtype属性の指定がすでにされているのですがそれが問題なのでしょうか？ その場合CSSには!importantを記述すればクリアできますか？ よろしくお願い致します。

  • CSS実行条件

    チェックボックスがオンになったらCSSを実行するようにしたいので いろいろ調べたんですが、下のようなCSSがないんです。 |||ボックスがオフなら要素で囲まれている文字を隠す |||オンなら囲まれている文字を表示する。 <input id="checkbox1" type="checkbox"> <label for="checkbox1" class="c1">テスト</label> <div class="a"> 表示したり隠したりする部分 </div> <div class="a">で囲まれている部分を隠したり表示したりします。 どなたかお願いします。

    • ベストアンサー
    • CSS
  • 「+」で次に来るタグを操作するCSSの記述方法は?

    http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/ 上記のアドレスで、下記の説明がされています。 「今回は、ulの表示・非表示でアコーディオンの役目をさせていますが、divなど他のタグに変えても出来ます、+を利用して次に来るタグが対象になっています」 input[type="checkbox"].on-off:checked + ul{height: 200px;} この様に記述すれば、「inputタグ」の次に来るタグ、すなわち「ulタグ」を、「+」によって操作できると言う説明です。 それでは、「次に来るタグ以外のタグ」は操作する方法はどうするのですか？ input[type="checkbox"].on-off:checked + .test ul{height: 200px;} 上記の様に記述すれば、<div class="test">～</div>を操作できますか？

    • 締切済み
    • CSS
  • CSSの空欄の記述方法

    CSSの空欄の記述方法 以下のようなCSSの記述が一般的ですが { とcolorプロパティの間に空欄があるのですが どうやって入れているのですか？ div.entry{ 　　　　　color: #000000; } この空欄は半角スペースを何回も入力していないのですが どうやったらこういうスペースを入力できますか？ TABキーだとこのスペースの半分しか入力できませんでした。 わかる方いらっしゃいましたら回答を宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 「>」を使った記述はCSS3からのもの？

    とあるサンプルサイトのCSSを見たところ、 #global-nav > ul > li:first-child a { border-radius:6px 0 0 0; } というCSS3の角丸設定のものがありました。 一番最初にあるリンクが貼られているli要素に角丸を設定というのは何となく分かるのですが、「#global-nav > ul > li」の「>」を使ったような記述を初めて見ました。 これはどういった意味を表しているのでしょうか？ 「#global-nav」にある「ul」の「li」という意味のものであれば、「>」は別に記載する必要性はないと思うのですが…また、この記述もCSS3からのものなのでしょうか？ ご存じ方、ご教授いただければ幸いです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • php？でスマホ用のCSSへ切り替える記述について

    php？でスマートフォン用のCSSへ切り替える記述について質問です。 HTML/CSSの知識はあるのですがPHPについてはさっぱりで… お力を頂ければと思います。 今度CSSの切り替えでスマートフォン用のサイトを表示することになったのですが、 一部システムが絡んでいるため切り替え方が分かりません。 拡張子は.ctpです。 HTML/CSSで下記の記述にしています。 <link rel="stylesheet" type="text/css" href="../_common/css/import.css" media="all and (min-width : 706px),print" /> <link rel="stylesheet" type="text/css" href="../_common/css/_phone/import.css" media="only screen and (max-width : 705px)" /> PHP？でCSSを読み込む部分は <?php echo $this->Html->meta('icon'); echo $this->Html->css('/_common/css/import.css'); echo $scripts_for_layout; ?> と記述されています。 上記にどういった記述を加えればHTML/CSSのような切り替えが可能でしょうか？ もしくは、全く別の部分をいじらなければならないのでしょうか？ よろしくお願い致します。

    • ベストアンサー
    • PHP
  • CSSの記述

    HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する