CSSセレクタまとめ3

カテゴリ:備忘録 2009年2月 9日 18:25

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

擬似要素とは

擬似要素とは、そこにあたかも要素があるようにふるまう CSS のことです。
たとえば、n

上記のように(タグ名は分かりやすいようにしていますので、こんなタグはありません)あたかもそこに要素があるように描画されます。n

擬似要素は、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、:を2回使って、::と記述することが定義されています。
CSS2 までに準拠してコーディングする場合は従来どおり、:1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定です。
ですので、:はCSS2、::はCSS3の仕様で、意味は同じ、ということです。n

この::方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。nIE8 では、どうやら CSS3 の記述である:: には対応していないようです。なので、しばらくは:と書いておくのが安全かもしれません。

擬似要素 (pseudo-element)「E::first-line」

E という要素の最初の 1 行目にのみスタイルを指定します。CSS1 で定義されています。
1 行目というのがフォントサイズやブラウザのウィンドウサイズ等、色々な条件で変わってきますので、注意が必要です。
ちなみにブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。n

テストしてみましたが、ほとんどのプロパティが指定できないので、実際どういう状況で使うのが望ましいのか分かりかねてます・・。n

E::first-letter

E という要素の最初の 1 文字にのみスタイルを指定します。CSS1 で定義されています。
1 文字目が特定の文字(引用符やカギ括弧など)の場合、次の文字と合わせてスタイルが指定されます。
::first-line 擬似要素同様、ブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。n

雑誌の ドロップキャプスのような効果を狙いたい場合などに使えます。n

E::selection

ユーザーが選択した文書に対してスタイルを指定します。
例えばマウスドラッグ等でテキストを選択状態にした際の見た目を変えることができます。
選択中だけ背景画像を出す、なんてことをやると面白い演出ができるかもしれませんね。n

E::before・E::after

言わずもがな、これについてはほとんどの方が知っているでしょう。
CSS2 では:before(:after)と書いていますが、CSS3からは::と2個になります。
::after は clearfix などでよく目にすると思います。n

クラスセレクタ (Class selectors)「E.className」

class 属性の値によってスタイルを指定します。基本的な使い方ですね。
ちなみに詳細度は 1 なので、ID などで指定したものに比べて上書きされやすいです。n

ID セレクタ (ID selectors)「E#idName」

id 属性の値によってスタイルを指定します。こちらも基本ですね。
class 属性での指定よりも詳細度が高く(100)ID で指定したスタイルは上書きされづらいです。n

否定擬似クラス (Negation pseudo-class)「E:not(s)」

E という要素のうち、s でないものにスタイルを指定します。n

子孫セレクタ (Descendant combinator)「E F」

子孫セレクタは、親要素に含まれるすべての子孫要素(F)に対してスタイルを指定します。
ユニバーサルセレクタや、属性セレクタなどと組み合わせて使用できます。n

子セレクタ (Child combinator)「E > F」

子セレクタは、親要素の直接の子要素に対してスタイルを指定します。孫要素以下は対象になりません。
div の中の span にスタイルを適用したいが、入れ子になっている div の中の span には適用させたくない、という場合などに使用します。n

隣接セレクタ (Adjacent sibling combinator)「E + F」

E という要素から見て直接の弟要素である F という要素にスタイルを指定します。
兄弟要素とは、ある親要素内で、同列に存在する要素のうち、前 (兄) 後 (弟) に存在する要素を指します。さらに直接の弟要素とは、E という要素と同列で、Eという要素の直後に隣接して存在する要素を指します。例えば次のような場合、h2 要素は h1 要素の直接の弟要素です。n

間接セレクタ (General sibling combinator)「E F」

E という要素の後に出現する F という要素にスタイルを指定します。
つまり、E という要素の弟要素が対象になります。n

このセレクタの使い方があまり思いつきませんが、例えば li:nth-child(3n) li なんて使い方をすると、3n 以降の li要素に対してスタイルを適用、なんて使い方ができます。n

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

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

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

トラックバックURL

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