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

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

サイトのキャプチャ

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

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

:first-of-type

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

記述例

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

表示

サイトのキャプチャ

対応ブラウザ

  • Firefox
  • Chrome
  • Safari
  • Opera
  • Internet Explorer

: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

top of page

©2017 coliss