Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- CSS文法 超まとめ
CSS文法 超まとめ
CSSセレクタ文法(記法)の超まとめです。
- CSSセレクタとHTML要素の各部の名前について
- 全ての要素に対して適用
- 要素名を指定して適用
- id名を指定して適用
- class名を指定して適用
- 子孫要素に適用
- 隣接した弟要素に適用
- 弟要素に全てに適用
- 特定の属性を持つ要素にのみ適用
- 特定の属性と値が完全一致した要素にのみ適用
- 特定の属性と値を半角スペースで区切った単語が完全一致した要素にのみ適用
- 特定の属性と値を『-』で区切った最初の単語が完全一致した要素にのみ適用
- 特定の属性と値の最初の文字列が完全一致した要素にのみ適用
- 特定の属性と値の最後の文字列が完全一致した要素にのみ適用
- 特定の属性と値の一部の文字列が完全一致した要素にのみ適用用
- 特定の要素以外の要素や、特定の属性や値を持たない要素に適用
- 要素に対してマウスホバーされている間だけ適用
- 要素に対してマウスクリックされている間だけ適用
- リンク先が存在する要素に適用
- リンク先が訪問済みの要素に適用
- URLのハッシュ値と同じid要素を持つ要素に適用
- フォーカス中の要素に適用
- enabledまたはdisabled状態の要素に適用
- チェックが入っている要素に適用
- 要素の最初の行に適用
- 要素の最初の行の最初の文字に適用
- 要素の最初の子要素を生成
- 要素の最後の子要素を生成
- HTMLドキュメントのルート要素を指定
- 最初の子要素を指定
- 最後の子要素を指定
- 上から数えてn番目の子要素に適用
- 下から数えてn番目の子要素に適用
- 同じ要素名を持つ最初の子要素を指定
- 同じ要素名を持つ最後の子要素を指定
- 上から数えて同じ要素名を持つn番目の子要素に適用
- 下から数えて同じ要素名を持つn番目の子要素に適用
- 唯一の子要素を指定
- nth系の引数に『n』を使った場合の考察
CSSセレクタとHTML要素の各部の名前について
div#main { color: red;}
p.text { font-size: 20px;}
※赤色部分が『セレクタ』です。
※青色部分が『プロパティ』です。
※紫色部分が『値』です。
<a href="./">リンク</a>
<div class="hoge">テキスト</div>
※赤色部分が『タグ名』(要素名)です。
※青色部分が『属性』です。
※紫色部分が『値』です。
全ての要素に対して適用
『*』(アスタリスク)を指定すると全ての要素に対して適用できます。
* { color: red; margin: 0;}
<div>ここはdiv要素です。</div> <p>ここはp要素です。</p>
要素名を指定して適用
『要素名』(タグ名)で指定された全ての要素に適用できます。頭に『#』とか『.』とかを付けなければ要素名として扱ってくれる、といったイメージでOKです。
div { color: red;} /* div要素全てに適用されます。 */
p { color: blue; margin: 0;} /* p要素全てに適用されます。 */
<div>ここはdiv要素です。</div> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <p>ここはp要素です。</p>
id名を指定して適用
『#id名』で指定されたid名を持つ要素に適用できます。
#hoge { color: red;} /* id名『hoge』を持つ要素に適用されます。 */
p#hoge1 { color: blue;} /* id名『hoge1』を持つp要素に適用されます。 */
<div id="hoge">ここはdiv要素です。id名に『hoge』と指定しています。</div> <div>ここはdiv要素です。</div> <p id="hoge1">ここはp要素です。id名に『hoge1』と指定しています。</p> <p>ここはp要素です。</p>
class名を指定して適用
『.class名』で指定されたclass名を持つ要素に適用できます。
尚、『.class名.class名』といったようにクラス名を連続して記述することでその全てのクラス名を持つ要素にのみ反映させることができます。たとえば『.hoge.hoge1』と指定した場合はクラス名『hoge』とクラス名『hoge1』を両方合わせ持つ要素に対して反映することができます。この指定方法を使用する場合は半角スペースを含まず連続して記述する必要がありますのでご注意ください。
.hoge { color: red;} /* class名『hoge』を持つ要素に適用されます。 */
p.hoge1 { color: blue;} /* class名『hoge1』を持つp要素に適用されます。 */
.hoge2.hoge3 { color: orange;} /* class名『hoge2』と『hoge3』を持つ要素に適用されます。 */
<div class="hoge">ここはdiv要素です。class名に『hoge』と指定しています。</div> <div class="hoge1">ここはdiv要素です。class名に『hoge1』と指定しています。</div> <div>ここはdiv要素です。</div> <p class="hoge">ここはp要素です。class名に『hoge』と指定しています。</p> <p class="hoge1">ここはp要素です。class名に『hoge1』と指定しています。</p> <p class="hoge1">ここはp要素です。class名に『hoge1』と指定しています。</p> <p class="hoge2">ここはp要素です。class名に『hoge2』と指定しています。</p> <p class="hoge2 hoge3">ここはp要素です。class名に『hoge2』、『hoge3』と指定しています。</p> <p>ここはp要素です。</p>
子孫要素に適用
セレクタを半角スペースで区切ると、指定された要素の子孫要素に適用できます。
p span { color: red;} /* p要素の中にいるspan要素全てに適用されます。 */
.hoge p { color: blue;} /* class名『hoge』を持つ要素の中にいるp要素全てに適用されます。 */
div * { color: orange;} /* div要素の中にいる全ての要素に適用されます。 */
<p>ここはp要素です。<span>ここはp要素の中のspan要素です。</span></p> <div class="hoge"> <p>ここはclass名『hoge』を持つdiv要素の中のp要素です。</p> </div> <div class="hoge"> <div>ここはclass名『hoge』を持つdiv要素の中のdiv要素です。</div> </div> <div>ここはdiv要素です。<span>ここはdiv要素の中のspan要素です。</span></div>
子要素に適用
『>』を使用すると、指定された要素の直下の子要素のみに適用できます。
div.hoge > div { color: red;} /* class名『hoge』を持つdiv要素の直下にいる要素のみに適用されます。 */
div { color: blue;}
<div class="hoge"> <div>ここはclass名『hoge』を持つdiv要素の中のdiv要素です。</div> <div> <div>ここはclass名『hoge』を持つdiv要素の中のdiv要素の中のdiv要素です。『div.hoge』の直下にいないため、文字が赤色となりません。</div> </div> </div>
隣接した弟要素に適用
『+』(プラス)を使用すると、指定された要素の隣接した弟要素のみに適用できます。注意点として、この記法は『隣接セレクタ』とか『隣接兄弟セレクタ』と呼ばれているにも関わらず、隣接した兄要素には反映されません。あくまでも自身の次に存在している弟要素のみの反映となります。あとIE6以下では動きませんのでご注意ください。
h2 + p { color: red;} /* h2要素の弟要素のp要素のみに適用されます。 */
<p>ここはp要素です。h2要素の手前にいるので赤字になりません。</p> <h2>ここはh2要素です。</h2> <p>ここはp要素です。</p> <p>ここはp要素です。</p>
弟要素に全てに適用
『~』(チルダ)を使用すると弟要素全てに適用できます。一般に『間接セレクタ』と呼ばれます。条件としては同じ親要素を持ち、自身より後続している要素に適用される、といった感じです。IE6以下では動きませんのでご注意ください。
h2 ~ p { color: red;} /* h2要素の弟要素のp要素全てに適用されます。 */
<p>ここはp要素です。</p> <h2>ここはh2要素です。</h2> <p>ここはp要素です。</p> <p>ここはp要素です。</p>
特定の属性を持つ要素にのみ適用
『セレクタ[属性名]』で特定の属性を持つ要素のみに適用できます。一般に『属性セレクタ』と呼ばれます。この場合は属性の値は関係なく、属性を持っているだけで対象となります。IE6以下では動きませんのでご注意ください。
p[id] { color: red;} /* id属性を持つp要素全てに適用されます。 */
p[title] { color: blue;} /* title属性を持つp要素全てに適用されます。 */
[class] { color: orange;} /* class属性を持つ要素全てに適用されます。『*[class]』と指定していることと同じです。 */
<p id="hoge">ここはp要素です。id名に『hoge』と指定しています。</p> <p>ここはp要素です。</p> <p title="">ここはp要素です。title属性を指定していますが値は記述していません。</p> <p>ここはp要素です。</p>
特定の属性と値が完全一致した要素にのみ適用
『セレクタ[属性名=値]』で、特定の属性と値が完全に一致した要素のみに適用できます。IE6以下では動きません。
記述方法ですが、値に空白スペースが含まれない場合は『div[title=hoge]』というようにそのまま記述してしまって構いません。
値に空白スペースが含まれる場合は『div[title="hoge hoge1"]』といったように『"』か『'』でくくる必要がありますのでご注意ください。
p[id=hoge] { color: red;} /* id属性を持ち、値が『hoge』に完全一致しているp要素に適用されます。 */
p[title=hoge1] { color: blue;} /* title属性を持ち、値が『hoge1』に完全一致しているp要素全てに適用されます。 */
[class="hoge2 "] { color: orange;} /* class属性の値が『hoge2 』と完全一致している要素全てに適用されます。お尻に空白スペースがありますが、こちらを含めての完全一致となります。 */
[title=初音ミク] { color: green;} /* 実は日本語も使えます。 */
<p id="hoge">ここはp要素です。id名に『hoge』と指定しています。</p> <p title="hoge1">ここはp要素です。title属性に『hoge1』と指定しています。</p> <p title="hoge1 ">ここはp要素です。title属性に『hoge1 』と指定しています。値に空白スペースが存在しているため青字となりません。</p> <p class="hoge2 ">ここはp要素です。class名に『hoge2 』と指定しています。</p> <p class="hoge2 hoge3">ここはp要素です。class名に『hoge2 hoge3』と指定しています。</p> <p title="初音ミク">ここはp要素です。title属性に『初音ミク』と指定しています。</p>
特定の属性と値を半角スペースで区切った単語が完全一致した要素にのみ適用
『セレクタ[属性名~=値]』で、特定の属性と値を半角スペースで区切った単語が完全一致した要素のみに適用できます。IE6以下では動きません。
値を半角スペースで区切った単語に一致しますので、例えば『hoge hoge1』の場合は『hoge』と『hoge1』に一致するということになります。
文法上は『"』か『'』でくくることで値に半角スペースを含めることができますが、この指定方法は値を半角スペースで区切った単語を比較しますので、値に半角スペースが含まれる場合は的確に要素を特定できません。ご注意ください。
p[title~=hoge] { color: red;} /* title属性を持ち、値を半角スペースで区切った単語が『hoge』に完全一致しているp要素に適用されます。 */
p[title~="hoge1"] { font-size: 20px;} /* title属性を持ち、値を半角スペースで区切った単語が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title~=初音ミク] { color: green;} /* 実は日本語も使えます。 */
<p title="hoge">ここはp要素です。title名に『hoge』と指定しています。</p> <p title="hoge hoge1">ここはp要素です。title名に『hoge hoge1』と指定しています。</p> <p title="初音ミク IA">ここはp要素です。title属性に『初音ミク IA』と指定しています。</p>
特定の属性と値を『-』で区切った最初の単語が完全一致した要素にのみ適用
『セレクタ[属性名|=値]』で、特定の属性と値を『-』(ハイフン)で区切った最初の単語が完全一致した要素のみに適用できます。IE6以下では動きません。
少々ややこしいのですが、値を『-』で区切った最初の単語に一致しますので、例えば『hoge-hoge1』の場合は『hoge』に一致するということになります。『hoge1-hoge2 hoge3』などでも『hoge1』が一致します。最初に現れた『-』で区切った最初の単語を拾っているようなイメージで問題ありません。
p[title|=hoge] { color: red;} /* title属性を持ち、値を『-』で区切った最初の単語が『hoge』に完全一致しているp要素に適用されます。 */
p[title|=hoge1] { color: blue;} /* title属性を持ち、値を『-』で区切った最初の単語が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title|=初音ミク] { color: green;} /* 実は日本語も使えます。 */
<p title="hoge">ここはp要素です。title名に『hoge』と指定しています。</p> <p title="hoge1-hoge2 hoge3">ここはp要素です。title名に『hoge1-hoge2 hoge3』と指定しています。</p> <p title="初音ミク-IA">ここはp要素です。title属性に『初音ミク-IA』と指定しています。</p>
特定の属性と値の最初の文字列が完全一致した要素にのみ適用
『セレクタ[属性名^=値]』で、特定の属性と値の最初の文字列が一致した要素のみに適用できます。IE6以下では動きません。
値の最初の文字列というのは、例えば『function』の場合だと『fu』や『func』や『funct』などに一致する、というイメージになります。
p[title^=hoge] { color: red;} /* title属性を持ち、値の最初の文字列が『hoge』に完全一致しているp要素に適用されます。 */
p[title^=hoge1] { color: blue;} /* title属性を持ち、値の最初の文字列が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title^=初音ミク] { color: green;} /* 実は日本語も使えます。 */
<p title="hoge">ここはp要素です。title名に『hoge』と指定しています。</p> <p title="hoge1hoge fuga">ここはp要素です。title名に『hoge1hoge fuga』と指定しています。</p> <p title="初音ミクとIA">ここはp要素です。title属性に『初音ミクとIA』と指定しています。</p>
特定の属性と値の最後の文字列が完全一致した要素にのみ適用
『セレクタ[属性名$=値]』で、特定の属性と値の最後の文字列が一致した要素のみに適用できます。IE6以下では動きません。
値の最後の文字列というのは、例えば『function』の場合だと『on』や『tion』や『nction』などに一致する、というイメージになります。
p[title$=hoge] { color: red;} /* title属性を持ち、値の最後の文字列が『hoge』に完全一致しているp要素に適用されます。 */
p[title$=hoge1] { color: blue;} /* title属性を持ち、値の最後の文字列が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title$=初音ミク] { color: green;} /* 実は日本語も使えます。 */
<p title="hoge">ここはp要素です。title名に『hoge』と指定しています。</p> <p title="hoge hogehoge1">ここはp要素です。title名に『hoge hogehoge1』と指定しています。</p> <p title="IAと初音ミク">ここはp要素です。title属性に『IAと初音ミク』と指定しています。</p>
特定の属性と値の一部の文字列が完全一致した要素にのみ適用
『セレクタ[属性名*=値]』で、特定の属性と値の一部の文字列が一致した要素のみに適用できます。IE6以下では動きません。
値の一部の文字列というのは、例えば『function』の場合だと『fu』や『unc』や『ncti』などに一致する、というイメージになります。
p[title*=hoge] { color: red;} /* title属性を持ち、値の一部の文字列が『hoge』に完全一致しているp要素に適用されます。 */
p[title*=hoge1] { color: blue;} /* title属性を持ち、値の一部の文字列が『hoge1』に完全一致しているp要素全てに適用されます。 */
[title*=ミク] { color: green;} /* 実は日本語も使えます。 */
<p title="hoge">ここはp要素です。title名に『hoge』と指定しています。</p> <p title="hogehoge1 fuga">ここはp要素です。title名に『hogehoge1 fuga』と指定しています。</p> <p title="初音ミクとIA">ここはp要素です。title属性に『初音ミクとIA』と指定しています。</p>
特定の要素以外の要素や、特定の属性や値を持たない要素に適用
『セレクタ:not(セレクタ)』で、特定の要素以外の要素や、特定の属性や値を持たない要素に適用できます。IE8以下では動きません。
『:not()』の記述方法は『()』の中に否定したいセレクタを記述すればOKです。全ての要素の中から特定のセレクタを除外したい場合は『*:not(セレクタ)』と記述すればOKで、『*』は省略できますので『:not(セレクタ)』と記述してもOKです。『()』の中に属性セレクタを入れることもできます。ただし、単純セレクタ(『 』や『>』や『+』などを使用した子孫要素や兄弟要素を特定するセレクタ)以外のセレクタは入れることができませんのでご注意ください。
『:not()』は複数続けて記述することが可能なので『:not(セレクタ1):not(セレクタ2)』といったように複数の条件付けをすることが可能です。
尚、全ての要素に対して『:not()』を記述した場合(『:not()』もしくは『*:not()』)に、一部のブラウザでその指定が反映されないバグが確認されていますのでご注意ください。
p:not(.hoge) { color: blue;} /* p要素の中から『hoge』というクラス名を持たない要素を赤字にします。 */
p:not([class]) { font-size: 20px;} /* p要素の中から『class』属性を持たない要素の文字サイズを20pxにします。 */
div:not([class]):not([id]) { background-color: yellow;} /* div要素の中からクラス名とid名を持っていない要素の背景を黄色にします。 */
div:not(p span) { background-color: blue;} /* 『()』の中には単純セレクタしか入れられませんのでこの指定は反映されません。 */
<p>ここはp要素です。</p> <p class="hoge">ここはp要素です。class名に『hoge』と指定しています。</p> <div>ここはdiv要素です。</div> <div class="miku">ここはdiv要素です。class名に『miku』と指定しています。。</div> <div id="miku">ここはdiv要素です。id名に『miku』と指定しています。</div>
要素に対してマウスホバーされている間だけ適用
『セレクタ:hover』で、要素に対してマウスホバーされている間だけに適用できます。こちらは一般に『擬似クラス』(:hover擬似クラス)と呼ばれます。スマホではタッチして指を離した瞬間などに反応したりすることがありますが、そもそもマウスカーソル用の処理となりますのでスマホでは使用を避けたほうが無難です。
対象となる要素にマウスホバー(マウスオーバー)されている間だけにCSSスタイルが当たり、マウスアウトされた場合は元のスタイルに戻ります。なのでJavaScriptのホバーイベント処理の時のように元に戻す記述などを別途用意する必要はありません。
尚、他の擬似クラスに上書きされる可能性がありますので、記述する順番にご注意ください。『:link』、『:visited』、『:hover』、『:active』の順番(『LVHA』の順)で記述するとバッティングせずにスタイルを適用させることができます。
div:hover { color: red;} /* div要素がマウスホバーされている間だけ文字を赤色にします。 */
p:hover { color: blue;} /* p要素がマウスホバーされている間だけ文字を青色にします。 */
p:hover span { color: orange;} /* p要素がマウスホバーされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:hover { font-size: 20px;} /* 全ての要素がマウスホバーされている間だけ文字を大きくします。 */
<div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <p>ここはp要素です。<span>ここはp要素の子要素のspan要素です。</span></p>
要素に対してマウスクリックされている間だけ適用
『セレクタ:active』で、要素に対してマウスクリックされている間だけに適用できます。こちらは一般に『擬似クラス』(:active擬似クラス)と呼ばれます。スマホでは機種によってタッチしてる間は反応したりすることがありますが、機種によりけりなので使用を避けたほうが無難です。
対象となる要素にマウスクリックされている間だけにCSSスタイルが当たり、クリックが終了されたら元のスタイルに戻ります。そのほかに『tab』キーを使って要素を選択している間もスタイルが当たります。
尚、他の擬似クラスに上書きされる可能性がありますので、記述する順番にご注意ください。『:link』、『:visited』、『:hover』、『:active』の順番(『LVHA』の順)で記述するとバッティングせずにスタイルを適用させることができます。
div:active { color: red;} /* div要素がマウスクリックされている間だけ文字を赤色にします。 */
p:active { color: blue;} /* p要素がマウスクリックされている間だけ文字を青色にします。 */
p:active span { color: orange;} /* p要素がマウスクリックされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:active { font-size: 20px;} /* 全ての要素がマウスクリックされている間だけ文字を大きくします。 */
<div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <p>ここはp要素です。<span>ここはp要素の子要素のspan要素です。</span></p>
リンク先が存在する要素に適用
『セレクタ:link』で、リンク先が存在する要素の要素に適用できます。リンク先というものが存在する要素に指定されるものなので、主にa要素に対して使われます。こちらは一般に『擬似クラス』(:link擬似クラス)と呼ばれます。
尚、他の擬似クラスに上書きされる可能性がありますので、記述する順番にご注意ください。『:link』、『:visited』、『:hover』、『:active』の順番(『LVHA』の順)で記述するとバッティングせずにスタイルを適用させることができます。
特にこの『:link擬似クラス』は他の擬似クラスよりもより手前に記述する必要があります。『:link擬似クラス』はリンク先が未訪問の要素に適用されるのではなく、あくまでもリンク先が存在する要素に対して適用されるものなので、『:visited』よりも前に記述する必要があります。
a:link { color: red;} /* 未訪問と訪問済みのスタイルを分けたい場合は、このように必ず『:visited』より手前に記述するようにしてください。 */
a:visited { color: orange;}
基本的なイメージとしては『href』属性がついてるa要素に適用される、といった感じで問題ないです。
※以下のサンプルを試される場合は、ブラウザの閲覧履歴を消去してからお試し下さい。
a:link { color: red;} /* リンク先が設定されているa要素の文字色を赤にします。 */
<p><a target="_blank" href="https://www.google.co.jp/">グーグルさんのページに飛びます。</a></p> <p><a>ここはa要素です。『href』属性の指定がないので赤色の文字になりません。</a></p>
リンク先が訪問済みの要素に適用
『セレクタ:visited』で、リンク先が訪問済みの要素の要素に適用できます。リンク先というものが存在する要素に指定されるものなので、主にa要素に対して使われます。こちらは一般に『擬似クラス』(:visited擬似クラス)と呼ばれます。
尚、他の擬似クラスに上書きされる可能性がありますので、記述する順番にご注意ください。『:visited』、『:visited』、『:hover』、『:active』の順番(『LVHA』の順)で記述するとバッティングせずにスタイルを適用させることができます。
特にこの『:visited擬似クラス』は『:link』よりも後に記述する必要がありますのでご注意ください。
a:link { color: red;}
a:visited { color: orange;} /* 未訪問と訪問済みのスタイルを分けたい場合は、このように必ず『:link』より後に記述するようにしてください。 */
※以下のサンプルを試される場合は、ブラウザの閲覧履歴を消去してからお試し下さい。
a:visited { color: red;} /* リンク先が訪問済みのa要素の文字色を赤にします。 */
<p><a target="_top" href="https://www.google.co.jp/">グーグルさんのページに飛びます。飛んだ後に戻ってくると色が変更されます。</a></p>
URLのハッシュ値と同じid要素を持つ要素に適用
『セレクタ:target』で、URLのハッシュ値と同じid要素を持つ要素に適用できます。『ハッシュ値』(フラグメント、アンカー)とはURLに記述されている『#』以降の記述となります。例えば『http://wp-p.info/index.html#hoge』ならば『hoge』がハッシュ値です。こちらは一般に『擬似クラス』(:target擬似クラス)と呼ばれます。IE8以下では動きません。
p:target { color: red;} /* 『ハッシュ値』と同じid属性を持つp要素を赤字にします。 */
<a href="#hoge_sample">こちらをクリックするとテキストの色が変わります。</a> <p id="hoge_sample">色が変更されます。</p>
色が変更されます。
フォーカス中の要素に適用
『セレクタ:focus』で、フォーカス中の要素の要素に適用できます。フォーカス中とはフォームの入力やキーボードの『tab』キーなどでa要素などを選択している状態のことを指します。こちらは一般に『擬似クラス』(:focus擬似クラス)と呼ばれます。
input:focus { background-color: yellow;} /* 文字入力中(フォーカス中)のinput要素の背景色を黄色にします。 */
<p>入力中は背景色が変わります: <input type="text"></p>
enabledまたはdisabled状態の要素に適用
『セレクタ:enabled』で、enabled状態の要素に適用でき、『セレクタ:disabled』で、disabled状態の要素に適用できます。こちらは一般に『状態擬似クラス』と呼ばれます。IE8以下のブラウザでは動きません。
<input type="button" value="ここはボタンです。" disabled> <!-- このようにdisabled属性を指定します。 --> <input type="button" value="ここはボタンです。" disabled="disabled"> <!-- XHTMLでは属性値を省略できないため『disabled="disabled"』と記述する必要があります。 -->
enabled状態とは有効(使用可能)な状態、disabled状態とは(無効)使用不可の状態です。主にa要素やinput要素、button要素などに使用されます。
input:disabled { color: white; background-color: gray;} /* disabled状態のinput要素を白字にして背景色をグレーにします。 */
input:enabled { color: blue;} /* enabled状態のinput要素を青字にします。 */
<input type="button" value="ここはボタンです。無効にしてます。" disabled> <input type="button" value="ここはボタンです。">
チェックが入っている要素に適用
『セレクタ:checked』で、チェックが入っている要素に適用でき、こちらは一般に『状態擬似クラス』と呼ばれます。IE8以下のブラウザでは動きません。
チェックが入っている要素に適用されるものなので、使用されるのは主に『<input type="checkbox">』(チェックボックス)か『<input type="radio">』(ラジオボタン)となります。
input:checked + p { color: red;} /* チェックが入った場合の弟要素のp要素を赤字にします。 */
<input type="checkbox"> <p>チェックが入ると色が変わります。</p> <input type="radio"> <p>チェックが入ると色が変わります。</p>
要素の最初の行に適用
『セレクタ:first-line』で、要素の最初の行に適用でき、こちらは一般に『擬似要素』と呼ばれます。IE8以下のブラウザでは動きません。
注意点として、ブラウザにレンダリングされた後の最初の行に適用されるものとなり、ソースコード上の最初の行ではありません。その他、この『:first-line』は『display』プロパティの値が『block』、『inline-block』、『table-cell』、『table-caption』等である場合のみ反映されますのでインライン要素などでは反映されません。ご注意ください。
p:first-line { color: red;} /* 最初の行を赤字にします。 */
<p> 最初の行が赤字になります。 ソースコード上の<br>最初の行ではありませんのでご注意ください。 </p>
要素の最初の行の最初の文字に適用
『セレクタ:first-letter』で、要素の最初の行の最初の文字に適用でき、こちらは一般に『擬似要素』と呼ばれます。IE8以下のブラウザでは動きません。
注意点として、ブラウザにレンダリングされた後の最初の行の最初の文字に適用されるものとなり、ソースコード上の最初の行の最初の文字ではありません。そして最初の文字の前にimg要素などが存在している場合も反映されません。その他、この『:first-line』は『display』プロパティの値が『block』、『inline-block』、『table-cell』、『table-caption』等である場合のみ反映されますのでインライン要素などでは反映されません。ご注意ください。
p:first-letter { color: red;} /* 最初の行の最初の文字を赤字にします。 */
<p> 最初の行の最初の文字が赤字になります。 ソースコード上の<br>最初の行の最初の文字ではありませんのでご注意ください。 </p>
要素の最初の子要素を生成
『セレクタ:before』で、要素の最初の子要素を生成でき、こちらは一般に『:before擬似要素』と呼ばれます。IE7以下のブラウザでは動きません。
『:before擬似要素』を生成する場合は、『content』プロパティの指定が必須となり、『content』プロパティに指定がない場合は『:before擬似要素』の生成はされません。何も文字列を含まない『:before擬似要素』を生成したい場合は『content』プロパティの値に空文字列を渡してあげればOKです。
div:before { content: "Hello World";} /* Hello Worldという文字列を含んだ『:before擬似要素』を生成します。 */
p:before {} /* 『content』プロパティが指定されていないので『:before擬似要素』は生成されません。 */
div.div1:before { content: ""; display: block; height: 10px; background-color: red;} /* 何も文字列を出力しない場合はこのように空文字列を渡してあげてください。 */
<div> 『:before擬似要素』が生成されてます。</div> <p>『content』プロパティの指定がないため『:before擬似要素』が生成されていません。</p> <div class="div1">『:before擬似要素』で赤いラインを生成しています。</div>
『:before擬似要素』のデフォルトの『display』プロパティの値は『inline』となります。
尚、『:before擬似要素』が生成される場所は指定された要素の前ではなく、指定された要素の中の最初の子要素の位置となりますのでご注意ください。
<!-- ここではありません --> <p> <!-- この辺に『:before擬似要素』が生成されます。 --> </p>
要素の最後の子要素を生成
『セレクタ:after』で、要素の最後の子要素を生成でき、こちらは一般に『:after擬似要素』と呼ばれます。IE7以下のブラウザでは動きません。
『:after擬似要素』を生成する場合は、『content』プロパティの指定が必須となり、『content』プロパティに指定がない場合は『:after擬似要素』の生成はされません。何も文字列を含まない『:after擬似要素』を生成したい場合は『content』プロパティの値に空文字列を渡してあげればOKです。
div:after { content: "Hello World";} /* Hello Worldという文字列を含んだ『:after擬似要素』を生成します。 */
p:after {} /* 『content』プロパティが指定されていないので『:after擬似要素』は生成されません。 */
div.div1:after { content: ""; display: block; height: 10px; background-color: red;} /* 何も文字列を出力しない場合はこのように空文字列を渡してあげてください。 */
<div> 『:after擬似要素』が生成されてます。</div> <p>『content』プロパティの指定がないため『:after擬似要素』が生成されていません。</p> <div class="div1">『:after擬似要素』で赤いラインを生成しています。</div>
『:after擬似要素』のデフォルトの『display』プロパティの値は『inline』となります。
尚、『:after擬似要素』が生成される場所は指定された要素の後ではなく、指定された要素の中の最後の子要素の位置となりますのでご注意ください。
<p> <!-- この辺に『:after擬似要素』が生成されます。 --> </p> <!-- ここではありません -->
HTMLドキュメントのルート要素を指定
『:root』で、HTMLドキュメントのルート要素を指定できます。これは『html』とセレクタ指定をした場合と等価になりますが『詳細度』(優先度)が『:root』の方が高いです。IE8以下では動きませんのでご注意ください。
この『:root』の使い道ですが、『!important』を使用せずに単純にCSSの詳細度を上げたい場合などに使用されます。なので詳細度で困ったときは文頭に『:root 』と記述すると幸せになれるかもしれません。
:root { background-color: yellow;} /* 『:root』の方が詳細度が高いため背景が黄色になります。 */
html { background-color: blue;} /* 『:root』の方が詳細度が高いためこの指定は反映されません。 */
:root p { color: red;} /* 『!important』を使用せず、単純に詳細度を上げたい場合はこのように記述すると良いです。 */
p { color: blue;} /* 『:root p』の記述の方が詳細度が高いためこの指定は反映されません。 */
<p>ここはp要素です。</p>
最初の子要素を指定
『セレクタ:first-child』で、最初の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:nth-child(1)』と指定した場合と等価です。IE7以下では動きません。
全ての最初の子要素を指定したい場合は『*:first-child』もしくは『:first-child』と指定します。注意点として、『>』等を記述せずに単純に『:first-child』と記述した場合は子孫要素全てに対する最初の子要素に適用されます。例えば『div :first-child』と記述した場合はdiv要素の子孫要素全ての最初の要素にデザインが当たります。尚、『テキストノード』(匿名ブロック)は無視されます。
div.hoge :first-child { color: red;} /* 『hoge』というクラス名を持つdiv要素の子孫要素全ての最初の要素を赤字にします。 */
div.hoge1 > :first-child { color: blue;} /* 『hoge1』というクラス名を持つdiv要素の最初の子要素を青字にします。 */
<div class="hoge">ここはテキストノードです。テキストノードは無視されます。 <p>ここは『hoge』というクラス名を持つdiv要素の中の最初のp要素です。</p> <div> <p>ここは『hoge』というクラス名を持つdiv要素の中のdiv要素の中の最初のp要素です。</p> <p>ここは『hoge』というクラス名を持つdiv要素の中のdiv要素の中の最後のp要素です。</p> </div> <p>ここは『hoge』というクラス名を持つdiv要素の中の最後のp要素です。</p> </div> <div class="hoge1"> <p>ここは『hoge1』というクラス名を持つdiv要素の中の最初のp要素です。</p> <div> <p>ここは『hoge1』というクラス名を持つdiv要素の中のdiv要素の中の最初のp要素です。</p> <p>ここは『hoge1』というクラス名を持つdiv要素の中のdiv要素の中の最後のp要素です。</p> </div> <p>ここは『hoge1』というクラス名を持つdiv要素の中の最後のp要素です。</p> </div>
注意点として要素名やid名、クラス名、属性などからの特定と『:first-child』を併用した場合、まず最初の要素かどうかの特定を行った後に、なおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:first-child』と指定した場合、子要素のうちの最初の要素がp要素で、なおかつ『hoge』というクラス名を持っていた場合に限りデザインが当たります。要素名から絞り込みをしたい場合は『:first-of-type』を使用してください。
div div.hoge:first-child { color: red;} /* div要素の子孫要素全ての最初の要素が『hoge』というクラス名を持ったdiv要素だった場合に赤字にします。 */
<div> <div class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つdiv要素です。</div> <div> <div>ここはdiv要素の中のdiv要素の中の最初のdiv要素です。</div> <div>ここはdiv要素の中のdiv要素の中の最後のdiv要素です。</div> </div> <div class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つdiv要素です。</div> </div>
最後の子要素を指定
『セレクタ:last-child』で、最後の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:nth-last-child(1)』と指定した場合と等価です。IE7以下では動きません。
全ての最後の子要素を指定したい場合は『*:last-child』もしくは『:last-child』と指定します。注意点として、『>』等を記述せずに単純に『:last-child』と記述した場合は子孫要素全てに対する最後の子要素に適用されます。例えば『div :last-child』と記述した場合はdiv要素の子孫要素全ての最後の要素にデザインが当たります。尚、『テキストノード』(匿名ブロック)は無視されます。
div.hoge :last-child { color: red;} /* 『hoge』というクラス名を持つdiv要素の子孫要素全ての最後の要素を赤字にします。 */
div.hoge1 > :last-child { color: blue;} /* 『hoge1』というクラス名を持つdiv要素の最後の子要素を青字にします。 */
<div class="hoge"> <p>ここは『hoge』というクラス名を持つdiv要素の中の最初のp要素です。</p> <div> <p>ここは『hoge』というクラス名を持つdiv要素の中のdiv要素の中の最初のp要素です。</p> <p>ここは『hoge』というクラス名を持つdiv要素の中のdiv要素の中の最後のp要素です。</p> </div> <p>ここは『hoge』というクラス名を持つdiv要素の中の最後のp要素です。</p> ここはテキストノードです。テキストノードは無視されます。 </div> <div class="hoge1"> <p>ここは『hoge1』というクラス名を持つdiv要素の中の最初のp要素です。</p> <div> <p>ここは『hoge1』というクラス名を持つdiv要素の中のdiv要素の中の最初のp要素です。</p> <p>ここは『hoge1』というクラス名を持つdiv要素の中のdiv要素の中の最後のp要素です。</p> </div> <p>ここは『hoge1』というクラス名を持つdiv要素の中の最後のp要素です。</p> </div>
注意点として要素名やid名、クラス名、属性などからの特定と『:last-child』を併用した場合、まず最後の要素かどうかの特定を行った後に、なおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:last-child』と指定した場合、子要素のうちの最後の要素がp要素で、なおかつ『hoge』というクラス名を持っていた場合に限りデザインが当たります。要素名から絞り込みをしたい場合は『:last-of-type』を使用してください。
div div.hoge:last-child { color: red;} /* div要素の子孫要素全ての最後の要素が『hoge』というクラス名を持ったdiv要素だった場合に赤字にします。 */
<div> <div class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つdiv要素です。</div> <div> <div>ここはdiv要素の中のdiv要素の中の最初のdiv要素です。</div> <div>ここはdiv要素の中のdiv要素の中の最後のdiv要素です。</div> </div> <div class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つdiv要素です。</div> </div>
上から数えてn番目の子要素に適用
『セレクタ:nth-child(n)』は、n番目の子要素に適用します。IE8以下では動きません。
『:nth-of-type』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:nth-of-type-child(2)』と指定した場合、間に別の要素があっても他の要素をカウントせずに2番目のp要素に適応されますが『p:nth-child(2)』と指定した場合は、間にある別の要素もカウントしてしまう為、2番目がp要素じゃなければ適応されません。
サンプルコード
div p:nth-child(1) { color: red;} /* div要素の中の2番目のp要素を赤字にします。 */
ブラウザでの表示結果
div p:nth-child(2) { color: red;} /* div要素の中の2番目のp要素を赤字にします。 */
div.hoge p:nth-child(2) { color: red;} /* クラス『hoge』要素の中の2番目の要素がpじゃないので適応されません。 */
<div> <p>ここは1番目のp要素です。</p> <p>ここは2番目のp要素です。</p> </div> <div class="hoge"> <p>ここは1番目のp要素です。</p> <div>ここは1番目のdiv要素です。</div> <p>ここは2番目のp要素です。</p> </div>
注意点としてid名やクラス名、属性などからの特定と『:only-child』を併用した場合、まずその要素が唯一の存在であるかどうかの特定を行った後になおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:only-child』と指定した場合、子要素がp要素しか存在しておらず、さらに『hoge』というクラス名を持っていた場合に限りデザインが当たります。
下から数えてn番目の子要素に適用
『セレクタ:nth-last-child(n)』は、最後から数えてn番目の子要素に適用します。『:first-child』、『:last-child』や『:nth-child(1)』と指定した場合と等価ですが、詳細度(優先度)はそれらより低く設定されます。IE8以下では動きません。
サンプルコード
div p:nth-last-child(1) { color: red;} /* div要素の中の最後から1番目のp要素を赤字にします。 */
div.hoge :nth-last-child(2) { color: blue;} /* 『hoge』というクラス名を持つdiv要素の中の最後から2番目要素を青字にします。 */
ブラウザでの表示結果
div p:nth-last-child(1) { color: red;} /* div要素の中の最後から1番目のp要素を赤字にします。 */
div.hoge :nth-last-child(2) { color: blue;} /* 『hoge』というクラス名を持つdiv要素の中の最後から2番目要素を青字にします。 */
div.hoge1 :nth-last-child(3) { color: blue;} /* 『hoge1』というクラス名を持つdiv要素の中の最後から3番目要素がないので適用されません。 */
<div> <p>ここは1番目のp要素です。</p> <p>ここは2番目のp要素です。</p> </div> <div class="hoge"> <div>ここは1番目のdiv要素です。</div> <div>ここは2番目のdiv要素です。</div> </div> <div class="hoge1"> <div>ここは1番目のdiv要素です。</div> <div>ここは2番目のdiv要素です。</div> </div>
注意点としてid名やクラス名、属性などからの特定と『:only-child』を併用した場合、まずその要素が唯一の存在であるかどうかの特定を行った後になおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:only-child』と指定した場合、子要素がp要素しか存在しておらず、さらに『hoge』というクラス名を持っていた場合に限りデザインが当たります。
同じ要素名を持つ最初の子要素を指定
『セレクタ:first-of-type』で、同じ要素名を持つ最初の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:nth-of-type(1)』と指定した場合と等価です。IE8以下では動きません。
『:first-child』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『div:first-child』と指定した場合、最初の子要素がdiv要素でない場合はデザインが反映されません。
div div:first-child { color: red;} /* div要素の最初の子要素がdiv要素だった場合に赤字にします。 */
<div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> </div>
それに対して、『div:first-of-type』と指定した場合は子要素の中のdiv要素しかカウントしないため、的確に要素を特定することができます。なので非常に使い勝手が良いです。
div div:first-of-type { color: red;} /* div要素の中の最初のdiv要素を赤字にします。 */
<div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> </div>
注意点としてid名やクラス名、属性などからの特定と『:first-of-type』を併用した場合、まず要素名からの特定を行った後になおかつ指定されたid名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:first-of-type』と指定した場合、子要素のうちの最初のp要素が『hoge』というクラス名を持っていた場合に限りデザインが当たります。子要素のうちの最初の『hoge』というクラス名を持つp要素、といった特定方法ではありませんのでご注意ください。
div p.hoge:first-of-type { color: red;} /* div要素の子要素の最初のp要素が『hoge』というクラス名を持っていた場合に赤字にします。 */
<div> <p class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つp要素です。</p> <p class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つp要素です。</p> </div> <div> <p>ここはdiv要素の中の最初のp要素です。</p> <p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p> <p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p> <p>ここはdiv要素の中の最後のp要素です。</p> </div>
全ての最初の子要素を指定したい場合は『*:first-of-type』もしくは『:first-of-type』と指定します。この場合は子要素として存在している全ての要素名ごとにカウントした最初の要素に対して適用されます。例えば子要素にp要素、span要素が存在した場合は最初のp要素と最初のspan要素にそれぞれデザインが当たります。
div :first-of-type { color: red;} /* 子要素の要素名ごとにカウントした最初の子要素を赤字にします。 */
<div> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> </div>
同じ要素名を持つ最後の子要素を指定
『セレクタ:last-of-type』で、同じ要素名を持つ最後の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:nth-of-type(1)』と指定した場合と等価です。IE8以下では動きません。
『:last-child』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:last-child』と指定した場合、最後の子要素がp要素でない場合はデザインが反映されません。
div p:last-child { color: red;} /* div要素の最後の子要素がp要素だった場合に赤字にします。 */
<div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> </div>
それに対して、『div:last-of-type』と指定した場合は子要素の中のp要素しかカウントしないため、的確に要素を特定することができます。なので非常に使い勝手が良いです。
div p:last-of-type { color: red;} /* div要素の中の最後のp要素を赤字にします。 */
<div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> </div>
注意点としてid名やクラス名、属性などからの特定と『:last-of-type』を併用した場合、まず要素名からの特定を行った後になおかつ指定されたid名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:last-of-type』と指定した場合、子要素のうちの最後のp要素が『hoge』というクラス名を持っていた場合に限りデザインが当たります。子要素のうちの最後の『hoge』というクラス名を持つp要素、といった特定方法ではありませんのでご注意ください。
div p.hoge:last-of-type { color: red;} /* div要素の子要素の最後のp要素が『hoge』というクラス名を持っていた場合に赤字にします。 */
<div> <p class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つp要素です。</p> <p class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つp要素です。</p> </div> <div> <p>ここはdiv要素の中の最初のp要素です。</p> <p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p> <p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p> <p>ここはdiv要素の中の最後のp要素です。</p> </div>
全ての最後の子要素を指定したい場合は『*:last-of-type』もしくは『:last-of-type』と指定します。この場合は子要素として存在している全ての要素名ごとにカウントした最後の要素に対して適用されます。例えば子要素にp要素、span要素が存在した場合は最後のp要素と最後のspan要素にそれぞれデザインが当たります。
div :last-of-type { color: red;} /* 子要素の要素名ごとにカウントした最後の子要素を赤字にします。 */
<div> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> </div>
上から数えて同じ要素名を持つn番目の子要素に適用
『セレクタ:nth-of-type』で、同じ要素名を持つn番目の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。IE8以下では動きません。
『:nth-child』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:nth-child(2)』と指定した場合、2番目の子要素がp要素でない場合はデザインが反映されません。
サンプルコード
div p:nth-of-type(2) { color: red;} /* div要素の中の2番目のp要素を赤字にします。 */
ブラウザでの表示結果
div p:nth-of-type(2) { color: red;} /* div要素の中の2番目のp要素を赤字にします。 */
<div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> </div>
全てのn番目の子要素を指定したい場合は『*:nth-of-type(n)』もしくは『:nth-of-type(n)』と指定します。この場合は子要素として存在している全ての要素名ごとにカウントしたn番目の要素に対して適用されます。例えば子要素にp要素、div要素が存在した場合はn番目のp要素とn番目のdiv要素にそれぞれデザインが当たります。
div :nth-of-type(2) { color: red;} /* div内の各子要素ごとにカウントした2番目の子要素を赤字にします。 */
<div> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> <p>ここはp要素です。</p> </div>
下から数えて同じ要素名を持つn番目の子要素に適用
『セレクタ:nth-last-of-type(n)』で、同じ要素名を持つ後ろから数えたn番目の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。IE8以下では動きません。
『:nth-last-of-type(n)』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:nth-last-child(2)』と指定した場合、後から数えて2番目の要素がp要素じゃなければ適応されませんが、『p:nth-last-of-type(2)』だと間に別の要素があっても他の要素をカウントせずに2番目のp要素に適応されます。
サンプルコード
div p:nth-last-of-type(1) { color: red;} /* div要素の中の後ろから1番目のp要素を赤字にします。 */
div p:nth-last-of-type(3) { color: blue;} /* div要素の中の後ろから3番目のp要素を青字にします。 */
ブラウザでの表示結果
div p:nth-last-of-type(1) { color: red;} /* div要素の中の後ろから1番目のp要素を赤字にします。 */
div p:nth-last-of-type(3) { color: blue;} /* div要素の中の後ろから3番目のp要素を青字にします。 */
<div> <p>ここは1番目のp要素です。</p> <div>ここは1番目のdiv要素です。</div> <p>ここは2番目のp要素です。</p> <div>ここは2番目のdiv要素です。</div> <p>ここは3番目の要素です。</p> <div>ここは3番目のdiv要素です。</div> </div>
唯一の子要素を指定
『セレクタ:only-child』で、子要素が唯一の存在だった場合に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:first-child:last-child』や『:nth-child(1):nth-last-child(1)』と指定した場合と等価ですが、詳細度(優先度)はそれらより低く設定されます。IE8以下では動きません。
div p:only-child { color: red;} /* div要素の中のp要素が唯一の存在だった場合に赤字にします。 */
div.hoge :only-child { color: blue;} /* 『hoge』というクラス名を持つdiv要素の子要素が一つだけだった場合、その子要素を青字にします。 */
<div> <p>ここはp要素です。</p> </div> <div class="hoge"> <div>ここはdiv要素です。</div> </div> <div> <p>ここはp要素です。</p> <div>ここはdiv要素です。</div> </div>
注意点としてid名やクラス名、属性などからの特定と『:only-child』を併用した場合、まずその要素が唯一の存在であるかどうかの特定を行った後になおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:only-child』と指定した場合、子要素がp要素しか存在しておらず、さらに『hoge』というクラス名を持っていた場合に限りデザインが当たります。
div p.hoge:only-child { color: red;} /* div要素の子要素のp要素が子要素としての唯一の存在であり、さらに『hoge』というクラス名を持っていた場合のみに赤字にします。 */
<div> <p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p> </div> <div> <p>ここはdiv要素の中のp要素です。</p> </div>
nth系の引数に『n』を使った場合の考察
『:nth-child』、『:nth-last-child』、『:nth-of-type』の引数の値に『n』を使った場合の『n』には『0を含む自然数の連番』が入っているものとして計算されます。数学における偶数を『2n』、奇数を『2n+1』と表す表記方法と同じです。要素数は『1』から数え始めますが、『n』は『0』から数え始めますのでご注意ください。
以下参考例です。『2n』と表したときは以下のような形になります。
- 『n = 0』=>『2 * 0』 -> 0番目の要素に該当
- 『n = 1』=>『2 * 1』 -> 2番目の要素に該当
- 『n = 2』=>『2 * 2』 -> 4番目の要素に該当
- 『n = 3』=>『2 * 3』 -> 6番目の要素に該当
- 『n = 4』=>『2 * 4』 -> 8番目の要素に該当
- 以下省略...
『2n+1』と指定した場合は以下になります。
- 『n = 0』=>『2 * 0 + 1』 -> 1番目の要素に該当
- 『n = 1』=>『2 * 1 + 1』 -> 3番目の要素に該当
- 『n = 2』=>『2 * 2 + 1』 -> 5番目の要素に該当
- 『n = 3』=>『2 * 3 + 1』 -> 7番目の要素に該当
- 『n = 4』=>『2 * 4 + 1』 -> 9番目の要素に該当
- 以下省略...
『6n-3』と指定した場合は以下になります。
- 『n = 0』=>『6 * 0 - 3』 -> -3番目の要素に該当
- 『n = 1』=>『6 * 1 - 3』 -> 3番目の要素に該当
- 『n = 2』=>『6 * 2 - 3』 -> 9番目の要素に該当
- 『n = 3』=>『6 * 3 - 3』 -> 15番目の要素に該当
- 『n = 4』=>『6 * 4 - 3』 -> 21番目の要素に該当
- 以下省略...
『-2n+3』と指定した場合は以下になります。
- 『n = 0』=>『-2 * 0 + 3』 -> 3番目の要素に該当
- 『n = 1』=>『-2 * 1 + 3』 -> 1番目の要素に該当
- 『n = 2』=>『-2 * 2 + 3』 -> -1番目の要素に該当
- 『n = 3』=>『-2 * 3 + 3』 -> -3番目の要素に該当
- 『n = 4』=>『-2 * 4 + 3』 -> -5番目の要素に該当
- 以下省略...
『n+3』と指定した場合は以下になります。
- 『n = 0』=>『1 * 0 + 3』 -> 3番目の要素に該当
- 『n = 1』=>『1 * 1 + 3』 -> 4番目の要素に該当
- 『n = 2』=>『1 * 2 + 3』 -> 5番目の要素に該当
- 『n = 3』=>『1 * 3 + 3』 -> 6番目の要素に該当
- 『n = 4』=>『1 * 4 + 3』 -> 7番目の要素に該当
- 以下省略...
要素数は『1』から数え始めるため、『0』番目以下の場合は無視されます。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
