[CSS]便利なセレクタの使い方が実例を見ながら学べる -CSS Selectors

CSSのセレクタの記述例とそれがどのように適用されるか、実例を見ながら学べるサイトを紹介します。
各ブラウザのサポート状況も掲載されています。

Learn CSS Selectors interactively
※閉鎖してしまったようです（2014年11月）。

[ad#ad-2]

サイトに掲載されているセレクタをいくつか紹介します。

:first-of-type

この疑似クラスは、指定されたエレメントの最初の子エレメントにマッチします。

記述例

#target p:first-of-type {color: #36de4e;}

表示

対応ブラウザ

• Firefox
• Chrome
• Safari
• Opera
• Internet Explorer

[ad#ad-2]

:first-child

この疑似クラスは、親エレメントの最初の子エレメントである場合のみマッチします。

記述例

#target p:first-child {color: #36de4e;}

表示

対応ブラウザ

• Firefox
• Chrome
• Safari
• Opera
• Internet Explorer

child

このセレクタは、指定したエレメントの全ての子エレメントにマッチします。

記述例

#target > p {color: #36de4e;}

表示

対応ブラウザ

• Firefox
• Chrome
• Safari
• Opera
• Internet Explorer