【CSS3リファレンス】CSS3セレクタ

こんにちは（・∀・）

CSS3で新しく追加されたセレクタをご紹介します。

CSS3以前のセレクタについてはこちらをご覧ください。
【CSSリファレンス】セレクタ

1. 属性セレクタ

1-1. E要素[ 属性名^="値"]

a[href^="http"] {
}

属性名で指定した値の開始文字列で指定した文字列から始まる要素に適用させます。サンプルはhref属性の値がhttpで始まるa要素に対してCSSを適用させます。

サンプル

See the Pen css3-selector_demo1 by Webデザインラボ (@webdlab) on CodePen.

Resultタブをクリックして見ていただければわかると思いますが、href属性の値がhttpで始まっているa要素の文字はピンク色で表示されているのがわかると思います。

1-2. E要素[ 属性名$="値"]

a[href$=".html"] {
}

属性名で指定した値の終了文字列で指定した文字列で終了する要素に適用させます。サンプルはhref属性の値が.htmlで終了するa要素に対してCSSを適用させます。

サンプル

See the Pen css3-selector_demo2 by Webデザインラボ (@webdlab) on CodePen.

href属性の値が.htmlで終了するa要素の文字はピンク色で表示されています。

1-3. E要素[ 属性名*="値"]

a[target*="_blank"] {
}

属性名で指定した値に該当する文字列が含まれている要素に適用させます。サンプルはtarget属性の値が_blankのa要素に対してCSSを適用させます。

サンプル

See the Pen css3-selector_demo3 by Webデザインラボ (@webdlab) on CodePen.

target属性の値が_blankのa要素の文字はピンク色で表示されています。

2. 間接セレクタ

2-1. E要素 ~ F要素

h2 ~ h2 {
}

E要素の後に出現するF要素に対して適用させます。E要素とF要素は兄弟関係でないと適用されません。サンプルはh2の後に出てくるh2に対してCSSを適用させます。

サンプル

See the Pen css3-selector_ by Webデザインラボ (@webdlab) on CodePen.

HTMLタブをクリックして見ていただければわかると思いますが、四番目のh2要素はdivの子要素となっており兄弟関係ではないのでCSSは適用されません。

3. 疑似クラス

3-1. 要素:root

:root {
}

文書のルート要素にスタイルが適用されます。

サンプル

See the Pen css3-selector_demo6 by Webデザインラボ (@webdlab) on CodePen.

:rootセレクタはhtml要素と等しいのですが、:rootセレクタの方がhtml要素より優先されます。

3-2. 要素:nth-child()

:nth-child() {
}

同じ親要素の中にある子要素の最初から数えてn番目の要素に適用します。odd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけを指定するという様な書き方ができます。

サンプル

See the Pen reWPjy_css3-selector_demo6 by Webデザインラボ (@webdlab) on CodePen.

上記サンプル「div *:nth-child {}」の場合、div要素の5番目の子要素(3番目のp要素)に適用されます。

See the Pen eZBxpd_css3-selector_demo7 by Webデザインラボ (@webdlab) on CodePen.

上記サンプル「div p:nth-child {}」の場合、5番目の子要素がp要素でない場合はどれにも適用されません。

値の指定方法

See the Pen XdNGPO_css3-selector_demo8 by Webデザインラボ (@webdlab) on CodePen.

1番目4番目を黄色、2番目5番目をピンク、3番目6番目を青に指定しました。

3-3. 要素:nth-last-child()

ul li:nth-last-child(2n) {
}

同じ親要素の中にある子要素の終わりから数えてn番目の要素に適用します。書式は:nth-child()と同じで、odd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。

サンプル

See the Pen BKQExOcss3-selector_demo9 by Webデザインラボ (@webdlab) on CodePen.

この疑似クラスは後から数えるだけで:nth-child()と書式は同じです。

3-4. 要素:nth-of-type()

:nth-of-type() {
}

同じ親要素の中にある子要素の最初から数えてn番目の同じ要素にだけ適用します。書式はodd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。

サンプル

See the Pen BKQEOq_css3-selector_demo10 by Webデザインラボ (@webdlab) on CodePen.

:nth-child()は指定している要素同士が続いている必要があるのに対し、:nth-of-type()は離れていても適用されます。

3-5. 要素:nth-last-of-type()

:nth-last-of-type() {
}

同じ親要素の中にある子要素の後ろから数えてn番目の同じ要素にだけ適用します。書式はodd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。

サンプル

See the Pen zqobJb_css3-selector_demo11 by Webデザインラボ (@webdlab) on CodePen.

この疑似クラスは後から数えるだけで:nth-of-type()と書式は同じです。

3-6. 要素:first-of-type

:first-of-type {
}

同じ親要素の中にある子要素の中で、最初に現れる要素に適用します。:nth-of-type(1)を指定した時と同じ結果が返されます。

サンプル

See the Pen wGoZEQ_css3-selector_demo12 by Webデザインラボ (@webdlab) on CodePen.

サンプルでは最初の1行だけボーダーを消しています。

3-7. 要素:last-of-type

:last-of-type {
}

同じ親要素の中にある子要素の中で最後に現れる要素に適用します。:nth-last-of-type(1)を指定した時と同じ結果が返されます。

サンプル

See the Pen grLyVB_css3-selector_demo13 by Webデザインラボ (@webdlab) on CodePen.

この疑似クラスは後から数えるだけで:first-of-type()と書式は同じです。

3-8. 要素:last-child

:last-child {
}

同じ親要素の中にある子要素の中で、最後に現れる要素に適用します。:first-childと逆で:nth-last-child(1)を指定した時と同じ結果が返されます。

サンプル

See the Pen KzNLpw_css3-selector_demo14 by Webデザインラボ (@webdlab) on CodePen.

:last-childは要素内で最後に書かれている子要素に適用されます。:nth-last-child(1)と同じ結果が返ってきます。この疑似クラスは後から数えるだけで:first-childと書式は同じになります。

3-9. 要素:only-child

:only-child {
}

親要素の中にある唯一の子要素に適用します。子要素が一つしかない場合のみ適用されます。

サンプル

See the Pen css3-selector_demo13 by Webデザインラボ (@webdlab) on CodePen.

親要素divの中に子要素が一つしかないグループのp要素にだけCSSが適用されています。

3-10. 要素:only-of-type

:only-of-type {
}

同じ親要素の中にある兄弟要素の中にその要素が一つしかない場合に適用します。:only-childと違って、他の種類の要素があってもその要素が一つしかなければ適用されます。

サンプル

See the Pen pyNmJJ_css3-selector_demo16 by Webデザインラボ (@webdlab) on CodePen.

親要素divの中に子要素が一つしかないグループのp要素にだけCSSが適用されています。p要素以外の子要素があっても適用されます。

3-11. 要素:empty

:empty {
}

要素内が空の要素に適用します。

サンプル

See the Pen yOVWMO_css3-selector_demo17 by Webデザインラボ (@webdlab) on CodePen.

空要素にだけスタイルが適用されます。

3-12. 要素:target

:target {
}

アンカーリンクのリンク先の要素に適用されます。

サンプル

See the Pen oxYRWd_css3-selector_demo18 by Webデザインラボ (@webdlab) on CodePen.

アンカーリンクをクリックするとリンク先にスタイルが適用されます。

3-13. 要素:enabled

:enabled {
}

テキストエリアなど無効になっていない要素に適用されます。

サンプル

See the Pen XdNwag_css3-selector_demo19 by Webデザインラボ (@webdlab) on CodePen.

textareaが有効な場合は青色背景になるよう指定してあります。

3-14. 要素:disabled

:disabled {
}

テキストエリアなど無効になっている要素に適用されます。

サンプル

See the Pen mPOYBv_css3-selector_demo20 by Webデザインラボ (@webdlab) on CodePen.

textareaが無効の場合はグレー背景になるよう指定してあります。

3-15. 要素:checked

:checked {
}

ラジオボタンやチェックボックスがチェックされた時に適用されます。

サンプル

See the Pen zqoQdd_css3-selector_demo21 by Webデザインラボ (@webdlab) on CodePen.

チェックされたら右側にある文字の背景色がピンクに変わります。

3-16. 要素:not(s)

:not(s) {
}

()内にセレクタを指定してそのセレクタに該当しない要素に対して適用します。

サンプル

See the Pen GZNaMe_css3-selector_demo22 by Webデザインラボ (@webdlab) on CodePen.

3番目のクラスdemo22にのみCSSが適用されました。

4. 疑似要素

4-1. 要素::first-line

::first-line {
}

最初の行にだけCSSが適用されます。CSS2の:first-lineと同じです。CSS3では疑似要素のコロンが2つになります。

サンプル

See the Pen aNBrXG_css3-selector_demo23 by Webデザインラボ (@webdlab) on CodePen.

CSSが適用されているので最初の行だけ色が変わっております。2行目以降色は変わっておりません。

4-2. 要素::first-letter

::first-letter {
}

最初の1文字にだけCSSが適用されます。CSS2の:first-letterと同じです。CSS3では疑似要素のコロンが2つになります。

サンプル

See the Pen jqVojy_css3-selector_demo24 by Webデザインラボ (@webdlab) on CodePen.

CSSが適用されているので最初の1文字だけ色が変わっております。2文字目以降は色は変わっておりません。

4-3. 要素::before

::before {
}

contentプロパティで要素の直前にある内容に対して適用します。CSS2の:beforeと同じです。CSS3では疑似要素のコロンが2つになります。

サンプル

See the Pen xVRNMz_css3-selector_demo25 by Webデザインラボ (@webdlab) on CodePen.

::beforeを指定したp要素の最初にcontentで指定した内容が挿入されます。

4-4. 要素::after

::after {
}

contentプロパティで要素の直後にある内容に対して適用します。CSS2の:afterと同じです。CSS3では疑似要素のコロンが2つになります。

サンプル/h5>

See the Pen KzNLjW_css3-selector_demo26 by Webデザインラボ (@webdlab) on CodePen.

::beforeを指定したp要素の最初と::afterを指定したp要素の最後にcontentで指定した内容が挿入されます。

CSS3で追加されたセレクタは以上になります。レスポンシブデザインなどモバイル向けのサイト制作はセレクタを使うことによって格段にコーディングするのが楽になります。ぜひご活用ください。

関連リンク

【CSSリファレンス】セレクタ