CSSセレクタまとめ1

カテゴリ:備忘録 2009年2月 2日 13:30

今回のエントリーは完全にメモエントリーです。
CSS3からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。(というかほぼコピー)
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n

ユニバーサルセレクタ (Universal selector)「*」

ユニバーサルセレクタ「*(アスタリスク)」は、すべての要素を対象とします。
(ワイルドカード、と言うと分かりやすい人もいるかもしれません。UNO のワイルドカードも同じ意味です。つまり「なんでも」ってこと)
使い方は下のような感じ。よくデフォルト CSS の初期化などで目にしますね。n

さらに、子孫セレクタとして使うこともできます。
下のサンプルだと、#fooという ID のついた div 要素の直接の子要素である span を除く span 要素(例えばdiv#foo p spanなど)にスタイルが適用されます。n

タイプセレクタ (Type selector)「E(elementのE)」

タイプセレクタは最も単純なセレクタです。要素名を指定することで、その要素に対してスタイルを適用します。n

属性セレクタ (Attribute selectors)E[foo]

ある要素の中で、指定した属性をもつ要素に対してスタイルを定義します。
下記のサンプルでは、class 属性を持った p 要素<p class="***">にスタイルを適用します。n

E[foo="bar"]

同じく属性セレクタです。
こちらは属性名と、その属性値まで含めてマッチしたものにスタイルを適用します。n

E[foo="bar"]

こちらも属性セレクタですが、を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、複数の属性値が指定されている場合は指定の属性値を含んでいればスタイルが適用されます。
(例えば、スペース区切りで複数の class が設定されている場合などに、指定した class 名が含まれている場合などです)n

E[foo^="bar"]

こちらも属性セレクタですが、^を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字で始まる属性値を含んでいればスタイルを適用します。
(正規表現の^と同じような使い方です)n

E[foo$="bar"]

こちらも属性セレクタですが、$を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字で終わる属性値を含んでいればスタイルを適用します。
(正規表現の$と同じような使い方です)
.pdfなど、特定の拡張子で href 属性が指定されている場合、アイコンを表示する、などの使い方ができます。n

E[foo*="bar"]

こちらも属性セレクタですが、*を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字を含む属性値を含んでいればスタイルを適用します。
と比べて、"文字列" であることに注意してください。サンプルではexを含む文字列(例えばextternalなど)にマッチします。n

長くなってしまうので、続きは次回で。n

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒備忘録

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/116