資料
セレクタ
セレクタの記述、つまり、どの要素に対してスタイルを適用させるのかという方法については、様々な方法があります。ある条件を満たす要素のみに対し、スタイルを適用するといった方法などがあるので、細やかなスタイル指定が可能となります。
タイプセレクタ
指定した要素全てにスタイルを適用します。次の例であれば、全ての<p>要素に青の背景色が適用されます。
p { background: blue }
ユニバーサルセレクタ
全ての要素にスタイルを適用します。「*」（アスタリスク）を記述します。次の例の場合、全てのあらゆる要素に赤の前景色が適用されます。
* { color: red }
classセレクタ
HTML/XHTMLのclass属性の値にマッチする要素にスタイルを適用します。次の例の場合、<p class="caution">の要素に赤の前景色が適用されます。
p.caution { color: red }
次のように要素名を省略することで、class="caution"が記述されたあらゆる要素に赤の前景色が適用されます。
.caution { color: red }
idセレクタ
id属性の値にマッチする要素にスタイルを適用します。次の例の場合、<p id="page32">の要素に赤の前景色が適用されます。
p#page32 { color: red }
次のように要素名を省略することで、id="page32"が記述されたあらゆる要素に赤の前景色が適用されます。
#page32 { color: red }
隣接セレクタ
ある要素の直後に存在する要素にスタイルを適用します。<h1>の要素の直後に記述された<h2>要素のみに赤の前景色が適用されます。
h1 + h2 { color: red }
子孫セレクタ
ある要素にネストされた要素にスタイルを適用します。次の場合、<p>要素が<div>要素にネストされている場合にスタイルが適用され、<p>要素のフォントサイズが80パーセントになります。
div p { font-size: 80% }
子供セレクタ
ある要素にネストされ、かつネストのレベルが1段階のみの要素にスタイルを適用します。次の場合、<p>要素が<div>要素に1段階のレベルでネストされている場合にスタイルが適用され、<p>要素のフォントサイズが80パーセントになります。
div > p { font-size: 80% }
| パターン |
意味 |
| E:first-child |
親要素の先頭の子供であるE要素にマッチする。 |
E:link
E:visited |
アンカーのリンク先が未訪であるE要素（:link）あるいは閲覧済みであるE要素（:visited）にマッチする。 |
E:active
E:hover
E:focus |
ユーザから特定の働きかけを受けている最中のE要素にマッチする。 |
| E:lang(c) |
人間言語がcであるE要素にマッチする。（言語情報の指定方法は構造化言語が決める） |
| E[foo] |
（値に関わらず）foo属性を設定されたE要素にマッチする。 |
| E[foo="warning"] |
foo属性値が「warning」であるE要素にマッチする。 |
| E[foo~="warning"] |
foo属性値がコンマで区切られた値のリストであり、そのうち1つが「warning」という値であるようなE要素にマッチする。 |
| E[lang|="en"] |
lang属性値がハイフンで区切られた値のリストであり、そのリストが「en」という値で始まるE要素にマッチする。 |
資料
音関連
ページの先頭
2024 Webデザインレッスン