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

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;
}

:first-lineを指定することで、最初の行にだけ適応されます。今回の場合1行目だけ赤い太字になり、2行目からは元に戻ります。

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;
}

※　参考　Selectors Level 3 / CSS3対応のCSSセレクタ一覧 / The 30 CSS Selectors you Must Memorize