忘れやすいCSSセレクタ

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

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

• {
  color:red;
  }

▼p要素の中にある要素すべてに適用されます。
p * {
color:red;

}

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

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

■　HTML　■

2種類のスタイルが同時に適用されます

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。
p strong {
font-size:16px;
}

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

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

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

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>

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

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

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

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

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

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

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

最初の行にだけ適用

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

:first-line

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

# 最初に現れる要素にだけ適用
:first-child
p:first-child {
  font-weight:bold;
  color:red;
}

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

n番目に現れる要素に適用

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

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

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

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…番目の要素に適用

後ろからn番目に現れる要素に適用

: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>

オンマウス時に適用

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

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

# 該当しない場合に適用
指定したセレクタに該当しない場合にスタイルが適用されます。
p:not(#sample) {
  font-size:18px;
}
「sample」というidを付けられたpタグ以外にスタイルが適用されます。
body *:not(strong) {
font-size:18px;
}

チェックされているユーザーインターフェース要素に適用

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

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>

属性セレクタ

特定の属性を持つ要素に適用

E[foo]　

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

特定の属性(値)を持つ要素に適用する

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

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

属性の値が指定した文字で始まる場合に適用する

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

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

属性の値が指定した文字で終わる場合に適用する

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

属性の値が指定した文字を含む場合に適用する

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

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