CSSではいくつものパターン名が使えます。
結構複雑ですが、知っていると便利なものもあるので頑張ってマスターしましょう。
全てのエレメントにマッチします。
* { ... }
<span>Match</span>
<div>Match</div>
E要素のエレメント全てにマッチします。
div { ... }
<span>not match</span>
<div>Match</div>
E要素のうち、class属性にwarningが含まれるものにマッチします。E[class~="warning"] と同等です。
この記述法は、HTML文書でのみ有効な簡易記法です。
div.section { ... }
<div>not match</div>
<div class="section">Match</div>
Eを * とするか省略すると、全要素が対象となります。
.section { ... }
<span>not match</span>
<div>not match</div>
<span class="section">Match</span>
<div class="section">Match</div>
E要素のうち、id属性がmyidに一致するものにマッチします。
同一のid属性はドキュメント内に一つしか存在しないので、通常はEを省略して記述します。
#someid <span>not match</span> <div id="etcid">not match</span> <span id="someid">Match</span>
E要素の内側にあるF要素にマッチします。
div span { ... }
<span>not match</span>
<div>not match</div>
<div><span>Match</span></div>
<div><p>not match</p><span>Match</span></div>
<div><p><span>Match</span></p></div>
E要素の子要素であるF要素にマッチします。
div > span { ... }
<span>not match</span>
<div>not match</div>
<div><span>Match</span></div>
<div><p>not match</p><span>Match</span></div>
<div><p><span>not match</span></p></div>
E F と似ていますが、前者が子要素・孫要素までマッチするのに対し
こちらは直属の子要素にしかマッチしません。
E 要素と兄弟関係にあり、E要素の直後にあるF要素にのみマッチします。
div + span <span>not match</span> <div>not match</div> <span>Match</span> <span>not match</span>
E要素のうち、最初に見つかった要素だけにマッチします。
div:first-child { ... }
<span>not match</span>
<div>Match</div>
<div>not match</div>
他のパターンと組み合わせることも可能です。
div span:first-child { ... }
<span>not match</span>
<div>not match</div>
<div><span>Match<span><span>not match<span></div>
<div><span>Match<span><span>not match<span></div>
未訪問リンクにのみマッチします。
A:link { ... }
<a href="未訪問リンク先">Match</a>
<a href="既に訪問したリンク先">not match</a>
既に訪問したリンクにのみマッチします。
A:visited { ... }
<a href="未訪問リンク先">not match</a>
<a href="既に訪問したリンク先">Match</a>
アクティブ状態のリンクにのみマッチします。
A:active { ... }
<a>not match</a><!-- リンクをクリックしたときにだけマッチ -->
ホバー状態の要素にのみマッチします。
A:hover { ... }
<a>not match</a><!-- 要素上にマウスカーソルが存在するときにだけマッチ -->
フォーカスが当たっている要素にのみマッチします。
textarea:hover { ... }
<textarea>not match</textarea><!-- 要素上にフォーカスが当たっているときにだけマッチ -->
特定の言語に当てはまる要素にのみマッチします。
HTML:lang(fr) { ... }
<html lang="en">
not match
</html>
<html lang="fr">
Match
</html>
E要素のうち、foo属性がセットされている要素にのみマッチします。
div[align] <div>not match</div> <div align="left">Match</div> <div align="right">Match</div> <div id="some">not match</div>
E要素のうち、foo属性値が"warning"に一致する要素にのみマッチします。
div[align="right"] <div>not match</div> <div align="left">not match</div> <div align="right">Match</div> <div id="some">not match</div>
E要素のうち、foo属性値に"warning"が含まれる要素にのみマッチします。
正確には、属性値をスペースで区切って
その中に"warning"に一致する文字列があるかどうかで判定します。
div[val~="v1"] <div>not match</div> <div val="v1">Match</div> <div val="v1 v2">Match</div> <div val="v2 v1">Match</div> <div val="v12">not match</div>
E要素のうち、foo属性値が"warning"で始まる要素にのみマッチします。
正確には、属性値をハイフン文字で区切って
先頭の文字列が"warning"に一致するかどうかで判定します。
div[val|="v1"] <div>not match</div> <div val="v1">Match</div> <div val="v1 v2">not match</div> <div val="v2 v1">not match</div> <div val="v1-v2">Match</div> <div val="v2-v1">not match</div> <div val="v12-v2">not match</div>
以下のパターン名はやや特殊です。
E要素の全てにおいて、コンテンツ先頭に指定した内容を付加します。
P.note:before { content: "Note: " }
<p class="note">some</p><!-- 画面上は "Note: some" と表示される -->
E要素の全てにおいて、コンテンツ最後に指定した内容を付加します。
コンテンツの先頭もしくは最後に、指定した内容を付加します。
E:before / E:after スタイルでのみ使用可能です。
以下のプロパティを1つ以上指定することが出来ます。
任意の文字列を埋め込みます。
p:before { content: "Note: " }
画像などの各種リソースを埋め込みます。
p:after { content: url("allow.png") }
詳細は不明です。
開始クオート文字を埋め込みます。
p:after { content: open-quote "etc." close-quote }
終了クオート文字を埋め込みます。
クオート文字を指定します。開始文字 終了文字 を対にして記述します。
複数組が記述された場合、それらはネストされた場合に使用されます。
Q:lang(en) { quotes: '"' '"' "'" "'" }
このような記述を考えます。
1組目はダブルクォーテーション文字、2組目はシングルクォーテーション文字です。
<q>Hello.</q> <q>Hello <q>Jon</q>.</q>
これらの表示は以下のようになります。
"Hello!" "Hello 'Jon'."