CSSセレクタまとめ2

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

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

擬似クラス (Structural pseudo-classes)「E:root」

ドキュメント内のルート要素である E という要素にスタイルを指定します。(X)HTML においては、ルート要素は html 要素になるので、以下のようにすれば html 要素にスタイルが適用されます。
XML の場合は、DTD で指定されたルート要素に対して適用されます。(XMLの場合はDTDなどによってルート要素が異なる)n

E:nth-child(n)

E という要素のうち、その親要素の n 番目の子要素である E 要素にスタイルを指定します。
(1th, 2th なんかの th と n 番目の n を合わせたもの、と覚えると覚えやすいかも)n

とすれば、div 要素内で、3 番目の子要素として出現する p 要素にのみスタイルが指定されます。また、n

として、奇数番目に出現する要素を指定したり、同じく even を n に入れて偶数番目のみを対称にしたりもできます。
(odd は奇数、even は偶数という意味)n

他にも 2n+1 など、an+b という記述も可能で、a と b に整数を入れると、n には 0 から順番に整数が代入されて計算されていきます。
つまり、2n+1 であれば、奇数 (odd) と同じであり、2n+0 であれば、偶数 (even) と同様です。ちなみに、+0 は省略しても同じですので、実際は、2n と記述します。n

注意点として、:nth-child の () 内の記述はスペースを許可していないようです。(webkit系)
この記述は、下記の擬似クラスに出てくる n にも同様に使用できます。n

E:nth-last-child(n)

E という要素のうち、その親要素の "最後" から数えて n 番目の子要素である E 要素にスタイルを指定します。n

とすれば、div 要素内で、一番最後の子要素として出現する p 要素にのみスタイルが指定されます。(div p:last-childと同義)n

E:nth-of-type(n)

E という要素のうち、その親要素内で同列 (兄弟関係) の E と同じ名前を持つ要素で n 番目に出現する E 要素にスタイルを指定します。n

とすれば、div 要素内で兄弟関係にある p 要素の中で、5番目に出現する p 要素にのみスタイルが指定されます。n

E:nth-last-of-type(n)

E という要素のうち、その親要素内で同列 (兄弟関係) の E と同じ名前を持つ要素で最後から数えて n 番目に出現する E 要素にスタイルを指定します。n

とすれば、div 要素内で兄弟関係にある p 要素の中で、最後から 3番目に出現する p 要素にのみスタイルが指定されます。(上記の逆から数える)n

E:first-child

E という要素のうち、その親要素の最初の子要素である E 要素にスタイルを指定します。
連続する要素の中で、"最初の要素だけ margin を指定したくない" なんてときに使えます。n

E:last-child

E という要素のうち、その親要素の最後の子要素である E 要素にスタイルを指定します。
上記とは逆で、"最後の要素だけ border を表示しない"なんてときに使えます。n

E:first-of-type

E という要素のうち、その親要素内で同列 (兄弟関係) の E と同じ名前を持つ要素で最初に出現する E 要素にスタイルを指定します。
E:first-child との違いは、E:first-child はそのE要素がその親要素内で "最初に" 登場した場合に限り適用されるスタイルです。
しかし、E:first-of-type はその親要素内で最初に登場する E に必ず適用されます。n

とすれば、div 要素内で兄弟関係にある p 要素の中で、最初に出現する p 要素にのみスタイルが指定されます。n

E:last-of-type

E という要素のうち、その親要素内で同列 (兄弟関係) の E と同じ名前を持つ要素で最後に出現する E 要素にスタイルを指定します。
(E:first-of-type と同じで、last-child との違いがあります)n

とすれば、div 要素内で兄弟関係にある p 要素の中で、最後に出現する p 要素にのみスタイルが指定されます。n

E:only-child

E という要素のうち、その親要素内で唯一の子要素である (兄弟を持たない) E 要素にスタイルを指定します。
つまり、div span:only-childとすると、親要素内に span 要素が 1 つだけしか存在しない場合にスタイルを適用します。
もし "なにかしらの" 要素が 1 つだけの場合にスタイルを適用したい場合はdiv *:only-child(もしくはdiv :only-child(div との間に半角スペース))」とすることで、特定の要素を指定せずに、なにかしらの要素があった場合にこのスタイルが適用されます。n

E:only-of-type

E という要素のうち、その親要素内で唯一の E 要素にスタイルを指定します。
上記との違いは、E 要素が唯一であれば、E 以外の要素があってもスタイルが適用されます。n

E:empty

E という要素のうち、子要素 (テキストノードも含めて) をまったく持たない E 要素にのみスタイルを適用します。
(テキストノードとは、タグを有さないテキストのことです。(<p>textnode<span>span text</span></p>の、textnodeの部分。つまり<p></p>だった場合))
自動的に書きだされるブログなどで、なにも含まれない要素がある場合などに使えます。n

リンク擬似クラス (The link pseudo-classes)「E:link、E:visited」

文書内のハイパーリンクのうち、ユーザーがまだ訪れていないリンクか:link 、または訪問済みリンクか:visitedによって、それぞれにスタイルを指定します。
注意点として、以下のサンプルのような順番で記述しないと意図した結果にならない場合があります。
(CSS は通常、下に書いたもののほうが有効になるため、:visitedの下に:linkを書いてしまうと、訪問しても変化がない、ということがあります)n

ダイナミック擬似クラス (The user action pseudo-classes)「E:active、E:hover、E:focus」

ユーザーの操作に合わせてスタイルを指定します。:active はユーザーによって対象要素がアクティブにされた時。例えばマウスでクリックしてボタンを離した時などですね。
:hover はユーザーによって対象要素が指し示されている時。マウスカーソルなどが重ねられた時など。(本来は a タグ以外にも使えますが、IE6 は対応していません)
最後に、:focus は対象要素がフォーカスされている状態でのスタイルを指定します。
例えば、入力待ちになっている input 要素など。n

ターゲット擬似クラス (The target pseudo-class)「E:target」

ハイパーリンクのうち、URI にアンカーリンクが指定されているリンクをアクティブにした際、そのターゲットとなる要素に対してスタイルを指定します。
(アンカーリンクとはhttp://example.com/example.html#section_3などの#の後ろにページ内のIDが指定されたリンクです)n

:target擬似クラスを指定することで、ページ内リンクで飛んだとしても、どこへのリンクだったかが分かるようになります。n

言語擬似クラス (The :lang() pseudo-class)「E:lang(fr)」

E という要素のうち、前方一致で fr という lang 属性値を持つ要素を対象にします。n

のように指定すれば、n

などと記述された p 要素にのみスタイルを設定します。n

UI 要素状態擬似クラス (The UI element states pseudo-classes)「E:enabled、E:disabled、E:checked」

E という要素のうち、有効なもの (:enabled)、無効なもの (:disabled)に対してそれぞれスタイルを指定します。
デフォルトのボタンとかを使っているのではなく、画像なんかで代替えしているときなどに使えそうですね。
E:checkedは、"ラジオボタン、チェックボックス" がチェックされた状態のときにスタイルを指定します。

さらに次回に続きます。n

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

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

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

トラックバックURL

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