Kana-Lier カナリエ

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

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

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

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

PR

セレクタとは

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

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


p{color:#000;}

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

(1):first-child

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

デモ


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

適応結果

  • 最初の要素
  • 2番目の要素

(2):last-child

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

デモ


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

適応結果

  • 最初の要素
  • 2番目の要素
  • 最後の要素

(3):nth-child()

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

デモ


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

適応結果

  • 1番目の要素
  • 2番目の要素
  • 3番目の要素

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

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

デモ


ul li{color:#000;}
ul li:nth-child(even){color:#C71585;}
適応結果
  • 1番目の要素
  • 2番目の要素
  • 3番目の要素
  • 4番目の要素

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

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

デモ


ul li{color:#000;}
ul li:nth-child(3n){color:#C71585;}
適応結果
  • 1番目の要素
  • 2番目の要素
  • 3番目の要素
  • 4番目の要素
  • 5番目の要素
  • 6番目の要素

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

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

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

デモ


ul li{color:#000;}
ul li:nth-child(3n+1){color:#C71585;}
適応結果
  • 1番目の要素
  • 2番目の要素
  • 3番目の要素
  • 4番目の要素
  • 5番目の要素
  • 6番目の要素
  • 7番目の要素

(4):not()

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

デモ


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

適応結果

  • 1番目の要素
  • 2番目の要素
  • 3番目の要素

(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>

適応結果

クラス名がついていません。

クラス名が「sec」ではじまります。

クラス名がついていません。

クラス名が「sec」ではじまります。

最後に

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

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