Sample List

CSS3で追加されたセレクタを活用してみる2

nth-of-typeとか

以下の4つの疑似クラスについて、まとめてみたいと思います。

:first-of-type その種類の最初の要素を選択
:last-of-type その種類の最後の要素を選択
:nth-of-type(n) その種類のn番目の要素を選択
:only-of-type ある要素内で子要素が唯一のその種類の要素を選択

:first-child等とは違い、あくまでその種類のと限定するのが特徴的ですね。
とはいえ、文章だけでは中々理解しがたい部分もあると思うので、実際にHTMLとCSSを交えながら解説していきたいと思います。

HTML

<div class="sample1">
  <p><strong>A</strong>cid <strong>B</strong>lack <strong>C</strong>herry（pタグ）</p>
  <p><strong>A</strong>cid <strong>B</strong>lack <strong>C</strong>herry（pタグ）</p>
  <p>Acid Black Cherry（pタグ）</p>
  <h2>Acid Black Cherry（h2タグ）</h2>
  <h3>Acid Black Cherry（h3タグ）</h3>
  <p><strong>A</strong>cid Black Cherry（pタグ）</p>
  <h2>Acid Black Cherry（h2タグ）</h2>
  <p>Acid Black Cherry（pタグ）</p>
  <p>Acid Black Cherry（pタグ）</p>
</div>

CSS

.sample1 h2:first-of-type { // 最初のh2の色を赤に
  color: red;
}
.sample1 h2:last-of-type { // 最後のh2の色を青に
  color: blue;
}
.sample1 p:nth-of-type(5) { // pの中で5番目のpをピンクに
  color: pink;
}
.sample1 p strong:only-of-type { // p内のstrongが唯一のstrongにスタイル適用
  background: #000;
  color: #fff;
  padding: 5px;
}

上記マークアップの結果は、以下になりますね。

Acid Black Cherry（pタグ）

Acid Black Cherry（pタグ）

Acid Black Cherry（pタグ）

Acid Black Cherry（h2タグ）

Acid Black Cherry（h3タグ）

Acid Black Cherry（pタグ）

Acid Black Cherry（h2タグ）

Acid Black Cherry（pタグ）

Acid Black Cherry（pタグ）

最初のh2は赤色に、最後のh2は青色に、5番目のpはピンク色に、pの中でstrongが一つしか無い場合にstrongはスタイル適用（黒背景に白字）されているのが確認できますね。

その他擬似クラス

CSS3で追加された疑似要素を挙げるとかなりの数になってしまうので、今回はその他として以下5つを紹介してみたいと思います。

:not() not()のカッコ内指定に当てはまらない要素を選択
:empty 要素内が空の要素を選択
:enabled テキストエリア等の有効となっているUI要素を選択
:disabled テキストエリア等の無効となっているUI要素を選択
:checked ラジオボタンやチェックボックス等で、チェックされているUI要素を選択

:not()を使ってみる

例えば、以下のようなHTMLがあったとします。

<div class="sample2">
  <p>Janne Da Arc</p>
  <p>Janne Da Arc</p>
  <p class="black">Janne Da Arc</p>
  <p class="black">Janne Da Arc</p>
  <p>Janne Da Arc</p>
  <p>Janne Da Arc</p>
</div>

CSSは以下のように記述してみましょう。

.sample2 p:not(.black) {
  color: red;
}

すると結果は以下のようになります。

Janne Da Arc

Janne Da Arc

Janne Da Arc

Janne Da Arc

Janne Da Arc

Janne Da Arc

.sample2 p:not(.black)という指定ですので、blackというクラスが付いていない要素は文字色が赤色になっていますね。

:emptyを使ってみる

以下のようなテーブルがあったとしましょう。

<table class="sample3">
  <tr>
    <td>ラーメン</td>
    <td>うどん</td>
    <td>蕎麦</td>
  </tr>
  <tr>
    <td>カレー</td>
    <td></td>
    <td>牛丼</td>
  </tr>
  <tr>
    <td>ピザ</td>
    <td>パスタ</td>
    <td>パン</td>
  </tr>
</table>

一つだけ中身が空のtdタグ（カレーの次）がありますね。
それでは、CSSは以下のように記述してみましょう。 

table.sample3 td:empty {
  background: #ccc;
}

すると、以下のようにになります。

ラーメン うどん 蕎麦
カレー 牛丼
ピザ パスタ パン

はい、結果は恐らく予想通りですね。中身が空のtdタグの背景がグレーになりました。

:enabled, :disabledを使ってみる

以下のようなテキストフィールドが置かれていたとしましょう。

<div class="sample4">
  <input type="text" enabled='enabled'><br>
  <input type="text" disabled='disabled'>
</div>

有効・無効それぞれの状態のテキストフィールドがありますね。CSSは以下のように記述します。

.sample4 input:enabled {
  background: green;
  margin-bottom: 10px;
  padding: 5px;
}
.sample4 input:disabled {
  background: red;
}

以下が結果ですね。


有効状態（:enabled）のテキストフィールドは緑背景でパディング広めのスタイル、
無効状態（:disabled）のテキストフィールドは赤背景のスタイルがそれぞれ適用されているのが確認できますね。

:checkedを使ってみる

ラジオボタンやチェックボックスで試してみようと思います。以下のようなHTMLがあったとします。 

<div class="sample5">
  <input id="radio01" type="radio" name="test" value="1"><label for="radio01">麻婆豆腐</label>
  <input id="radio02" type="radio" name="test" value="2"><label for="radio02">あんかけ焼きそば</label>
  <input id="radio03" type="radio" name="test" value="3"><label for="radio03">青椒肉絲</label>
  <input id="radio04" type="radio" name="test" value="4"><label for="radio04">エビチリ</label>
  <br>
  <input id="checkbox01" type="checkbox" name="test" value="1"><label for="checkbox01">ペペロンチーノ</label>
  <input id="checkbox02" type="checkbox" name="test" value="2"><label for="checkbox02">カルボナーラ</label>
  <input id="checkbox03" type="checkbox" name="test" value="3"><label for="checkbox03">ボンゴレ</label>
  <input id="checkbox04" type="checkbox" name="test" value="4"><label for="checkbox04">ペスカトーレ</label>
</div>

CSSは以下のようにしてみましょう。

.sample5 input:checked {
  outline: 5px solid red;
}

実際に以下のラジオボタンやチェックボックスを選択して、試してみましょう。


選択されると赤のアウトラインがかかるようスタイルが適用されましたね。

一覧に戻る