もう一度おさらい、CSSのセレクタ～そして使ってみよう

IDやclassで指定するCSSはよく使うけど、それ以外のセレクタはあんまり覚えてない…というあなた。…いや私です。一緒にCSSセレクタのおさらいをしてみませんか？

手打ちでHTMLを書いていた時代からこの仕事をしているくせに、まだへなちょこのままの鈴木です。すみません。勉強不足もいいところなのですが、ちょくちょくリファレンスやGoogle先生にお世話になっています。

先日コーディングをしている際にも、またリファレンスにお世話になったのですが、「これあんまり使ってないな～」「忘れてたな～」という反省がありまして、自分メモに限りなく近いですがいくつか共有したいと思います。

しかし、世の中にはもうすでに、CSSセレクタをきっちりがっちり解説されている先輩諸兄がたくさんいらっしゃるので、私は「こういう感じに使えるよね！」という具体例をいくつかご紹介できたらなと思っています。

※クライアントワークで使用することが多いため、IE8でも使えるCSS2までのものが主となりますが、ご了承ください。

【その１】別ウィンドウのリンクにだけ、アイコンをつけよう

ありますよね、こういうのとか、こういうのとかの「別ウィンドウで開きますよ」的アイコン。
これをつけるのに、アイコン用の別classを作っていたあなたは…こうしてみましょう！

こうなります！
この指定は「aタグという要素の中に、target=”_blank”に一致する属性があれば」スタイルを適用するというセレクタです。
このほかにも、a[target]という書き方だと「aタグの中にtargetの属性があれば」というセレクタもあり、この場合は_blankでなくてもtargetが入っていさえすればスタイルが適用されます。

【その２】class=”last”は省略できる

これも、あるあるではないでしょうか…。
floatを使って、横並びに要素を並べているとき、一番最後にくる要素には、右側のマージンを入れたくない場合…。

マージンをなくすためだけに、この最後のs_boxにclass=”last”とか、入れていませんでしたか…？入れなくて良い方法があります！なくしちゃいましょう。

このセレクタは「親要素内の最初の子要素」に対してスタイルを適用するセレクタです。
可能なら”:last-child”（最後の子要素）で書いたほうが、直感的にわかりやすいのですが、なんとIE8では効かないのです…！
なので、今回はあえて左側にマージンを設定して、最初の子要素のマージンをなくす方法で作成しています。（なんで”:first-child”のほうだけ効くんでしょうね ^-^;; ）

１つ注意点としては、親要素、今回の場合は<div class=”wrapper”>の最初に、たとえばうっかり<p>が１つ入っていたら、その<p>のほうにスタイル適用となってしまいますのでよく確認を…。
CSS3であれば、「○番目の子要素」や「最後から○番目の子要素」などのセレクタも使えるので、さらに自由度がアップします！（後述の一覧表を参照）

【その３】項目と項目の間だけ、線を入れたい

箇条書きリストで項目を列記していて、項目と項目の間だけ点線などを入れて見やすくしたい。…ってこともよくありませんか？そんなときも、別でclassをつけずとも…

<ul>
　<li>あいうえお</li>
　<li>かきくけこ</li>
　<li>さしすせそ</li>
　<li>たちつてと</li>
　<li>なにぬねの</li>
</ul>

これだけです！

この場合は「liのすぐ後にliがある場合」の、後ろのliのほうへスタイルを適用するセレクタになります。+でつないだ２つの要素の、間になにか別のタグが入っている場合は適用されません。また、この２つの要素は兄弟関係にある必要があります。入れ子ではなく、並列で並んでいる場合ですね。ulとliなどの親子関係（入れ子になっている場合）は、使えません。

【その４】classの囲みが１つ減らせる（かも？）

これはちょっと、レアケースかもしれませんが…見出しのh1タグの後だけキャッチコピーが入ったりとかする場合。

<section>
　<h1>タイトル</h1>
　<p>ここにヒットする。キャッチコピーなど</p>
</section>
<p>ここはちがう</p>

この場合は、「h1のあとに出てくる、兄弟要素のp」へスタイルを適用する場合のセレクタになります。「ここはちがう」というテキストの入っているpは、h1との兄弟関係にない（並列でない）ため、スタイルが適用されません。この結合子は、実務ではちょっと使いどころが限定的かもしれません…。

【その５】価格表の近くにコレとか、吹き出しみたいなアレとかも!?

floatレイアウトをするときのclearfixでおなじみ、:beforeと:afterですが、こんな使い方もあります！
価格表などに、かなりの高確率で必要なあの注意書き…こうすると便利です。

写真のあとに「※画像はイメージです」などにも使えるかもしれませんね～。

もしこの文言をHTMLに直接書いてある場合、この文言に変更が入った場合には全ページを修正しなくてはなりませんが、:beforeや:afterで入れていたら、CSSファイルの１か所を修正するだけで、全ページへ反映することができます。エクセレント！

また、この:beforeや:afterなどを使用して、CSSだけで吹き出しを作ったりタイトルを装飾してしまったりす強者も、いらっしゃるようです！（ググってみてください！）

さて、いくつか私の思いつくあるある～な場面を想定して、いくつかのセレクタをおさらいさせていただきました。もちろん、これ以外にもいろいろ便利に使えるセレクタがあります。

パターン	説明	初出の CSSレベル
*	すべての要素	2～
E	Eの要素	1～
E[foo]	“foo” 属性を持つE要素	2～
E[foo=”bar”]	“foo” 属性の値が “bar” であるE要素	2～
E[foo~=”bar”]	“foo” 属性が空白区切りの値をとり、その値の1つが “bar” であるE要素	2～
E[foo^=”bar”]	“foo” 属性の値が “bar” から始まるE要素	3～
E[foo$=”bar”]	“foo” 属性の値が “bar” で終わるE要素	3～
E[foo*=”bar”]	“foo” 属性の値に “bar” という文字列を含むE要素	3～
E[foo\|=”en”]	“foo” 属性の値がハイフン区切りの値をとり、その値が “en” から始まるE要素	2～
E:root	文書のルート要素であるE要素	3～
E:nth-child(n)	同じ親要素内のn 番目の子であるE要素	3～
E:nth-last-child(n)	同じ親要素内の後ろから数えて n 番目の子であるE要素	3～
E:nth-of-type(n)	同じ親要素内のすべてのE要素のうち、n番目にあるE要素	3～
E:nth-last-of-type(n)	同じ親要素内のすべてのE要素のうち、後ろから数えてn番目にあるE要素	3～
E:first-child	同じ親要素内の最初の子であるE要素	2～
E:last-child	同じ親要素内の最後の子であるE要素	3～
E:first-of-type	同じ親要素内のすべてのE要素のうち、最初のE要素	3～
E:last-of-type	同じ親要素内のすべてのE要素のうち、最後のE要素	3～
E:only-child	唯一の子であるE要素	3～
E:only-of-type	同じ親要素内のうち、同じ型をもつ要素が他にない唯一のE要素	3～
E:empty	テキストノードを含め子を持たないE要素	3～
E:link E:visited	ハイパーリンクのアンカーであるE要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの	1～
E:active E:hover E:focus	特定のユーザーアクション状態にあるE要素	1～
E:target	URIが参照したターゲット先になるE要素	3～
E:lang(fr)	言語情報 “fr” を持つE要素 (言語情報の決定方法は文書言語が規定する)	2～
E:enabled E:disabled	UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの	3～
E:checked	UI 要素である E のうち、チェックされた (:checked) もの (チェックボックスやラジオボタンなど)	3～
E::first-line	E要素の最初の1行	1～
E::first-letter	E要素の最初の1文字	1～
E::before	E要素の内容の前にある、生成された内容	2～
E::after	E要素の内容の後にある、生成された内容	2～
E.warning	“warning” クラスを持つE要素	1～
E#myid	“myid” という ID を持つE要素	1～
E:not(s)	単体セレクタsにマッチしないE要素	3～
E F	E要素の子孫であるF要素	1～
E > F	E要素の子であるF要素	2～
E + F	E要素の直後に現れるF要素	2～
E ~ F	E要素のあとに現れるF要素	3～