意外と知らない!?CSSセレクタ20個のおさらい

CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。

属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。

私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。

また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。

SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイルで指定していないのでieだとうまく動かないものもあります。

1. *　（すべての要素に適用）

アスタリスク（*）ですべての要素にスタイルを適用することができます。

* {
  color:red;
}

すべての要素に適用されます。

p * {
  color:red;
}

p要素の中にある要素すべてに適用されます。

2. .X　（指定したクラス名がある要素に適用）

クラス名を指定した要素にスタイルが適用されます。

.sample {
  font-size:18px;
  color:red;
}

<p class="sample">この中身に適用されます<p>

このような指定方法もできます。

p.sample {
  font-size:18px;
  color:red;
}

<p class="sample">この中身に適用されます</p>
<div class="sample">この中身には適用されません</div>

クラス名sampleがついたp要素に適用されます。クラス名がsampleでもdiv要素には適用されません。

クラス名を半角スペースで区切ると複数適用することもできます。

p.sample1 {
  color:red;
}
p.sample2 {
  font-size:18px;
}

<p class="sample1 sample2">2種類のスタイルが同時に適用されます</p>

3. #X　（指定したid名がある要素に適用）

基本的には先ほどのクラスと一緒です。ただidの場合は1つの要素にしか適用されません。

#sample {
  font-size:16px;
}

idはjavascriptやページ間の移動の際にも使われます。

4. E F　（子孫要素に適用）

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

p strong {
  font-size:16px;
}

pタグの中にあるstrong要素に適用されます。

<p>このようにpタグのなかにある<strong>strongタグ</strong>に適用されます。</p>

このような場合ですね。

.mago strong {
  font-size:16px;
}

クラス名magoの中にあるstrong要素に適用されます。

p.mago strong {
  font-size:16px;
}

magoというクラス名がついたp要素のなかにあるstrong要素に適用されます。

5. E > F　（子要素にのみ適用）

セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

div.sample > a {
  font-size:18px;
  font-weight:bold;
}

クラス名sampleの直下にあるa要素にのみ適用されます。

<div class="sample">
  <a href="#">リンク1<a/>
  <ul>
    <li><a href="#">リンク1<a/></li>
  </ul>
<div>

6. E + F　（隣接している要素に適用）

「+」で隣接している要素にスタイルを適用することができます。

h4 + p {
  color:red;
  font-weight:bold;
}

h4要素に隣接しているp要素の文字が赤になります。

<h4>H4要素</h4>
<p>h4要素の隣にあると適用されます</p>
<p>h4要素の隣ではないので適用されません</p>

7. E ~ F　（後にある要素に適用【CSS3】）

「~」である要素の後にある要素にスタイルを適用することができます。

h4 ~ p {
  color:red;
  font-weight:bold;
}

h4要素に隣接しているp要素の文字が赤になります。

<p>h4要素のの前なので適用されません</p>
<h4>H4要素</h4>
<p>h4要素の後にあると適用されます</p>
<p>h4要素の後にあると適用されます</p>

擬似要素・擬似クラス

8. :first-letter （最初に現れる文字にだけ適用）

雑誌の記事でたまにありそうな。wikipediaのトップページみたいな感じです。

p:first-letter {
  font-weight:bold;
  font-size:32px;
}

9. :first-line　（最初の行にだけ適用）

p:first-line {
  font-weight:bold;
  color:red;
}

10. :first-child　（最初に現れる要素にだけ適用）

最初に現れる要素にのみ適用されます。

p:first-child {
  font-weight:bold;
  color:red;
}

<p>最初のp要素にだけ適用されます。</p>
<p>2つ目以降のp要素には適用されません。</p>

11. :nth-of-type(n)　（n番目に現れる要素に適用【CSS3】）

:nth-of-type(n)でn番目に現れる要素にスタイルを適用します。

p:nth-of-type(2) {
  font-weight:bold;
  color:red;
}

2番目に現れるp要素にのみ適用されます。

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

nの部分は以下のように複数指定することもできます。

p:nth-of-type(2n+1) {
  font-weight:bold;
  color:red;
}

このようにすると奇数番目に表れるp要素にのみ適用されます。

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

12. :nth-last-of-type(n)　（後ろからn番目に現れる要素に適用【CSS3】）

:nth-last-of-type(n)で後ろから数えてn番目に現れる要素にスタイルを適用します。nの使い方は先ほどと同じです。

p:nth-last-of-type(2) {
  font-weight:bold;
  color:red;
}

後ろから2番目に現れるp要素にのみ適用されます。

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

13. :hover　（オンマウス時に適用）

hoverといえばリンクですが、divでも利用できます。ただしIE6はダメです。

div.onmouse:hover {
  background:#eee;
}

14. :not　（該当しない場合に適用【CSS3】）

指定したセレクタに該当しない場合にスタイルが適用されます。

p:not(#sample) {
  font-size:18px;
}

「sample」というidを付けられたpタグ以外にスタイルが適用されます。

body *:not(strong) {
  font-size:18px;
}

strongタグ以外のすべてにスタイルが適用されます。

15. :checked　（チェックされているユーザーインターフェース要素に適用【CSS3】）

ようするにラジオボタンやチェックボックスです。

input[type=radio]:checked + label {
  color: red;
  font-weight:bold;
}

チェックされてボタンに直接スタイルを適用するのではなく、その隣のラベルに適用します。

<form> 
   <input type="radio" name="btn" value="sample1"> 
   <label>ボタン1</label>
   <input type="radio" name="btn" value="sample2"> 
   <label>ボタン2</label>  
</form> 

属性セレクタ

属性セレクタはすべて以下のhtmlをサンプルにしています。

<a href="#" title="タイトルその1">タイトルその1</a><br />
<a href="#" title="タイトルその2">タイトルその2</a><br />
<a href="#" title="3つ目のタイトル">3つ目のタイトル</a><br />
<a href="#">タイトル4</a>

16. E[foo]　（特定の属性を持つ要素に適用）

tittle属性を持つaタグにスタイルを適用します。値は関係ありません。

a[title] {
  font-weight:bold;
  color:red;
}

17. E[foo="bar"]　（特定の属性(値)を持つ要素に適用する）

tittle属性に「タイトルその1」という値を持つa要素にスタイルを適用します。

a[title="タイトルその1"] {
  font-weight:bold;
  color:red;
}

18. E[foo^="bar"]　（属性の値が指定した文字で始まる場合に適用する【CSS3】）

tittle属性が「タイトル」で始まる場合にスタイルを適用します。

a[title^="タイトル"] {
  font-weight:bold;
  color:red;
}

19. E[foo$="bar"]　（属性の値が指定した文字で終わる場合に適用する【CSS3】）

tittle属性が「タイトル」で終わる場合にスタイルを適用します。

a[title$="タイトル"] {
  font-weight:bold;
  color:red;
}

20. E[foo*="bar"]　（属性の値が指定した文字を含む場合に適用する【CSS3】）

tittle属性が「その」を含む場合にスタイルを適用します。

a[title*="その"] {
  font-weight:bold;
  color:red;
}

ということで役立ちそうなCSSセレクタを20個解説しました。これだけ押さえておく色々デザインの幅が広がりそうです。今後実用例を紹介できればと思います。