簡単便利！CSSセレクタ厳選8個まとめ

2013/01/24：解説に一部誤りがありましたので、修正致しました。

こんにちは。古いブラウザを気にせずにセレクタを使い放題できると、すごく幸せになれるKanaです。
今日は、スマートフォンサイトのコーディングで私が必ずといっていいほど、よく使う簡単便利なCSSセレクタを厳選してご紹介したいと思います。

いつも忘れがちなので備忘録もかねていますXD
それではどうぞ！

セレクタとは

セレクタとは、スタイルシートを適応させる対象を指し示す部分のことです。
CSSの書式は、以下の図のようになっています。

例えば、pタグに対し、文字色を黒とする場合のCSSは以下のようになります。

p{color:#000;}

pがセレクタ、colorがプロパティ、#000が値になります。
セレクタは上記のように単一のものにを指定するだけではなく、複数の指定ができたり、条件を指定することができます。

• (1):first-child（最初の子要素に適応）
• (2):last-child（最後の子要素に適応）
• (3):nth-child()（括弧内の数字番目の要素に適応）
  • (3-1):nth-childで奇数・偶数の指定
  • (3-2):nth-childで倍数の指定
  • (3-3):nth-childで数式の指定
• (4):not()（括弧内以外の要素に適応）
• (5)E[foo^=”bar”]（ある要素の指定した属性が、指定された値ではじまるもの）

(1):first-child

ある要素内にある、最初の子要素に対してスタイルシートが適応されます。
:nth-child(1)と同じ動きをします。

デモ

ul li{color:#000;}
ul li:first-child{color:#C71585;}

適応結果

---

(2):last-child

:first-childとは真逆で、ある要素内にある、最後の子要素に対してスタイルシートが適応されます。
:nth-last-child(1)と同じ動きをします。

デモ

ul li{color:#000;}
ul li:last-child{color:#C71585;}

適応結果

---

(3):nth-child()

:nth-childは、()内の数字番目の要素に対して、スタイルシートを適応させます。

デモ

ul li{color:#000;}
ul li:nth-child(2){color:#C71585;}

適応結果

(3-1)奇数・偶数の指定ができる

単純に数字を指定するだけではなく、奇数・偶数で指定することもできます。
奇数であれば、odd、偶数であれば、evenを括弧内に記述します。

デモ

ul li{color:#000;}
ul li:nth-child(even){color:#C71585;}

適応結果

(3-2)倍数の指定ができる

3の倍数、4の倍数に対してスタイルシートを適応させることもできます。
指定の方法は、括弧内に(数字n)と記述します。

デモ

ul li{color:#000;}
ul li:nth-child(3n){color:#C71585;}

適応結果

(3-3)数式の指定ができる

括弧内に数式を記述し、その数式に当てはまる要素に対しスタイルシートを適応させることができます。
数式は、an+bという形式になるようにします。
デモでは、3n+1という数式にしました。
1,4,7,10,…3n+1番目の要素に対してスタイルシートが適応されます。

私は、３個ずつ要素を並べるデザインをコーディングするとき、clearを適応したい要素を指定する場合によく使います。

デモ

ul li{color:#000;}
ul li:nth-child(3n+1){color:#C71585;}

適応結果

---

(4):not()

:notセレクタは括弧内で指定した要素・セレクタ以外に対し、スタイルシートを反映させます。

デモ

ul li{color:#000;}
ul li:not(:last-child){color:#C71585;}

適応結果

---

(5)E[foo^=”bar”]

E[foo^=”bar”]のセレクタは、ある要素がもつ属性が、指定した値ではじまるものに対してスタイルシートが適応されます。

デモでは、p要素に対してクラス名がsecで始まるものに対し、スタイルシートを適応します。

デモ

CSS

p{color:#000;}
p[class^="sec"]{color:#C71585;}

HTML

<p>クラス名がついていません。</p>
<p class="sec1">クラス名が「sec」ではじまります。</p>
<p>クラス名がついていません。</p>
<p class="sec2">クラス名が「sec」ではじまります。</p>

適応結果

最後に

便利なセレクタはもっと沢山ありますが、私の利用頻度が高いものだけをご紹介しました。
たくさんクラスを振らなくても、CSSだけで指定ができるので、HTMLがとても見やすくなります。
入力フォームまわりなどは、また改めて別記事でご紹介できればと思います。

それでは良いコーディングライフを！