Marketing Blog マーケティングブログ

2015.11.11

Webサイト制作

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

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

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

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

例)
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という要素にのみ適用します。
[codepen_embed height=”130″ theme_id=”0″ slug_hash=”dYQqgB” default_tab=”result” user=”cube_tjmt”]See the Pen <a href=’http://codepen.io/cube_tjmt/pen/dYQqgB/’>dYQqgB</a> by cube_tjmt (<a href=’http://codepen.io/cube_tjmt’>@cube_tjmt</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

2. hoge:nth-child(n)

hogeという要素でn番目の要素にのみ適用します。
CSS3追加セレクタです。
[codepen_embed height=”150″ theme_id=”0″ slug_hash=”OyaBWg” default_tab=”result” user=”cube_tjmt”]See the Pen OyaBWg by cube_tjmt (@cube_tjmt) on CodePen.[/codepen_embed]

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追加セレクタです。
[codepen_embed height=”150″ theme_id=”0″ slug_hash=”epQwBN” default_tab=”result” user=”cube_tjmt”]See the Pen epQwBN by cube_tjmt (@cube_tjmt) on CodePen.[/codepen_embed]

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

4. hoge + piyo

hogeという要素の直後にあるpiyoという要素にのみ適用
[codepen_embed height=”180″ theme_id=”0″ slug_hash=”wKQLrN” default_tab=”result” user=”cube_tjmt”]See the Pen wKQLrN by cube_tjmt (@cube_tjmt) on CodePen.[/codepen_embed]

5. hoge > piyo

hogeという要素の子要素であるpiyoという要素にのみ適用。
[codepen_embed height=”173″ theme_id=”0″ slug_hash=”yYQdKN” default_tab=”result” user=”cube_tjmt”]See the Pen yYQdKN by cube_tjmt (@cube_tjmt) on CodePen.[/codepen_embed]

—————
以上になります。
セレクタはとても便利なものですが、チームで構築をされている場合はルールをしっかり守って使用してくださいね。

お困りのことがあれば、
お気軽にお問い合わせ
ご相談ください。

ホームページ作成 / スマホ対応 /
アクセス解析 / サーバー管理 / サイト更新

営業電話は電話ではなくパートナー募集メールフォームより入力してください

pagetop