知っているとコーディングが捗る！？CSSセレクタ10選

こんにちは。11月なのに冬を感じさせない気温で服装に困っています。
ところで今までデザイン方面の事を記事にしていたのですが、今回からは構築についての記事をしっかり書いていこうと思います。

この記事の目次

というかセレクタってなんだ。
1. hoge:first-child
2. hoge:nth-child(n)
3. hoge:not(s)
4. hoge + piyo
5. hoge > piyo

というかセレクタってなんだ。

セレクタとは、スタイルを適応させる対象を指定するものになります。

例）
body { color:#336666; }
#hoge { border:1px dashed #999 }
.hogehoge { text-align:center; }

上記の赤文字の部分、つまり要素やid、classです。
デザインによって細かく場所を指定しないといけない時、むやみにidやclassをつけてしまうとスマートなコードになりません。
CSS3で新しく追加されたセレクタもありますし、ムダを省くためにも積極的に使っていきましょう。
IE8以下ではCSS3で追加されたセレクタが一部使用出来ないため、「Selectivizr」というJavaScriptを設置してください。

本題ですが、私が構築の際頻繁に使用するセレクタの中から5個を厳選して紹介します。
—————

1. hoge:first-child

親要素のなかで最初のhogeという要素にのみ適用します。

See the Pen dYQqgB by cube_tjmt (@cube_tjmt) on CodePen.0

2. hoge:nth-child(n)

hogeという要素でn番目の要素にのみ適用します。
CSS3追加セレクタです。

See the Pen OyaBWg by cube_tjmt (@cube_tjmt) on CodePen.0

nにはいろいろな記述方法で要素を指定できます。
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用
などなど。

3. hoge:not(s)

hogeという要素のなかで、(s)の部分に記述している条件の要素”以外”に適用します。
CSS3追加セレクタです。

See the Pen epQwBN by cube_tjmt (@cube_tjmt) on CodePen.0

ちなみにhogeの部分は記述しなくても構いません。その場合は全ての要素で(s)の要素以外に適応されることになります。
記述しない場合は「*」セレクタと同じですね。
また(s)にはほぼすべてのセレクタを入れ込むことが可能です。
:not(#sample)　･･･　id=”sample”以外の要素に適用
:not(:first-child)　･･･　最初の要素以外に適用
:not([href*=”cubecube.net”])　･･･　リンクアドレスに「cubecube.net」を含んでいる場合以外のaタグに適用
などなど。
2個目に紹介した○番目の要素という記述方法も可能ですよ。
(正直あまり使える機会がないけどもっと活用したいなと思うセレクタです。)