知っているととっても便利!擬似クラスって何?どうやって使うの?

tutorial
 
 

copypet.jpでも実は頻繁に登場する擬似クラス。
リストやブロックなどループで要素を設定している時に、◯番目だけ違うデザインを当てたいんだけど、いちいちクラスを設定してその都度クラスを指定するのって何度もやるとイライラするのよねぇ。って時や、チェックが入っている時だけこのデザインにしたい!なんてことってよくありませんか?
これ擬似クラスを使うとわりとチャチャっとできちゃいます。
擬似クラスって何よ?って思った方もいるかと思いますが、身近な擬似クラスといえば「:hover」です。よく使ってるでしょ?
擬似クラスを使えるようになってデザインやカスタマイズの幅を広げましょう。

擬似クラスってなに?

擬似クラス[Pseudo-classes]

擬似クラスはセレクターに追加するキーワードで、セレクターとして選択された要素(タグの塊)に対して特定の状態を指定することができるものです。

擬似要素というのは、セレクターに追加するキーワードで、セレクターとして選択された要素(タグの塊)に追加することで「擬似的な要素」を作ることができるようになります。
copypet.jp

で?そもそも擬似要素の::before(:before)と::after(:after)って何がどうなってどう使えるの? | copypet.jp|パーツで探す、web制作に使えるコピペサイト。

copypet.jpでも頻繁に使っている擬似要素の::before(:before)と::after(:after)ですが、コピペだけしていると調整やプラスアルファのデザインを加えたい時に悩んでしまうこともあるでしょう。 とりあえずコピペすりゃええと思うが、だがしかし・・・何がどうなっているかは知っておきたい。とこっそり思っておられる方のために「何とな〜くわかる」から「知ってる!知ってる!」ぐらいになるよう説明しておきます。…

copypet.jp

記事を見る

リンク周りでよく使う擬似クラスの種類

リンク周りでよく使う擬似クラスは以下の3つが多いと思います。css初心者でもこれは使ったことがあるでしょう。
特に装飾などで使えるのは「:hover」ですね。

  • :link    未訪問状態のリンクの状態を指定する
  • :visited   訪問済み状態のリンクの状態を指定する
  • :hover    マウスで要素の上をホバーさせた時の状態を指定する

まずは基本的な設定をしてみよう。

もうちょっと複雑なことをしてみよう。

リンク先が未訪問なら背景がオレンジ色さらに、マウスホバーで背景が緑色
リンク先が訪問済みなら背景が水色さらに、マウスホバーで背景がピンク色
というように条件が重なる場合があります。
そんな時は、リンク先が未訪問か訪問済みかを指定後ホバーを指定します。


copypet.jpでも多くの「:hover」を使ったものがありますので、気になる方は覗いてみてください。

ボタンなどのフォーム周りでよく使う擬似クラスの種類

「button」や「input」などフォーム周りでよく使う擬似クラスはこちらの4種
基本的には、「:checked」「:focus」の2つかと思います。

:checked   ラジオボタンやチェックボックス・セレクトボックスなどの要素がチェックされている状態
:focus    入力フォームなどのフォーカスを持っている要素がフォーカスされた状態
:disabled  入力フォームなどで入力や選択ができない状態
:required  入力フォームなどで必須項目が設定されている状態

:checked

ラジオボタンやチェックボックス・セレクトボックスなどの要素がチェックされている状態の時を指定できます。

ニャン易度

「radio」をチェックしたら「テキスト」の背景をオレンジ色
「checkbox」をチェックしたら「テキスト」の背景を緑色
<input type="radio" name="cp_input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="cp_input" id="no">
<label for="no">No</label>
<input type="checkbox" name="cp_checkbox" id="check">
<label for="check">Check!</label>
input[type="radio"]:checked + label {
	background: #FFAB91;
}
input[type="checkbox"]:checked + label {
	background: #90CAF9;
}

〜 + 〜
「 + 」は直後に隣接している要素という意味になります。

:focus

フォーカスを持っている要素(inputなど)がフォーカスされた状態(選択された時)を指定できます。

ニャン易度
テキストボックスにフォーカスしたらテキストボックスの背景が水色からオレンジ色に変わる
<input type="text" placeholder="Textfield" />
input[type="text"] {
	background: #90CAF9;
	border: 0;
}
input[type="text"]:focus {
	background: #FFAB91;
	outline: 0;
}

:disabled

入力フォームなどで入力や選択ができない状態の時を指定できます。

「disabled」の指定をする時は明らかに選択できないことがわかるようマウスポインタも一緒に変更してあげると親切です。

:required

入力フォームなどで必須項目が設定されているものに対して指定できます。

ちなみに「button」や「input」などフォーム周りを装飾する時は、デフォルトのデザインをクリアにしておくと装飾しやすくなりますよ。

Topics:フォームのデフォルトのデザインをクリアしたい!

ここでクリアしているものは基本的に使うであろうものだけをまとめています。
ラジオボタンやチェックボックスはデフォルトを全て消してラベルでデザインすることがほとんどですがここでは割愛させていただきます。

ニャン易度
input[type="text"],
input[type="password"],
button,
textarea,
select {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;

	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
input:focus,
textarea:focus {
	outline: none;
}

copypet.jpの「:checked」や「:focus」を利用して装飾したものをご紹介しています。

使いこなせるようになると便利!n番目などの順位処理によく使うもの

「3番目だけ色を変えたい」「最初の行だけ太字にしたい」などn番目のみ何かを設定したい場合って以外と多いですよね。
一つ一つclassをつけていけばできるっちゃできるんですが、まぁ面倒だし、つけ忘れるし。。。
もちろんcmsなどを利用していると吐き出されるhtmlソースには手をつけられなかったりもしますね。
そんな時に使える擬似クラスです。

最初・最後などの単純な指定

:first-child

兄弟要素のグループの中で最初の要素を指定します。

ニャン易度
[div_blok1]内の最初の[p]だけ背景がオレンジ色
[div_blok1]内の[p]のデフォルトは背景が水色

ここからクラス名[div_blok1]のdiv↓

[div class="div_blok1"]内の1行目の[p]テキスト

[div class="div_blok1"]内の2行目の[p]テキスト

[div class="div_blok1"]内の3行目の[p]テキスト

ここまでクラス名[div_blok1]のdiv↑

[div_blok3]内の最初の[li]だけ背景がピンク色
[div_blok3]内の[li]のデフォルトは背景が緑色

ここからクラス名[div_blok2]のdiv↓
  • [div class="div_blok2"]内の1行目の[li]テキスト
  • [div class="div_blok2"]内の2行目の[li]テキスト
  • [div class="div_blok2"]内の3行目の[li]テキスト
ここまでクラス名[div_blok2]のdiv↑
<div class="div_blok1">
	<p>[div_blok1]内の1行目の[p]テキスト</p>
	<p>[div_blok1]内の2行目の[p]テキスト</p>
	<p>[div_blok1]内の3行目の[p]テキスト</p>
</div>
<div class="div_blok2">
	<ul>
	<li>[div_blok2]内の1行目の[li]テキスト</li>
	<li>[div_blok2]内の2行目の[li]テキスト</li>
	<li>[div_blok2]内の3行目の[li]テキスト</li>
	</ul>
</div>
.div_blok1 p {
	background: #90CAF9;
}
.div_blok1 p:first-child {
	background: #FFCCBC;
}
.div_blok2 li {
	background: #A5D6A7;
}
.div_blok2 li:first-child {
	background: #F8BBD0;
}

ただし「:first-child」を設定した要素の最初のアイテムAよりも前にの他の要素がある場合は適応されません。
「p:first-child」の場合、アイテムAは[p]となります。
本来1行目の[p]だけ水色にし、それ以外はオレンジ色にしたいのですが、1行目に[h2](指定している[p]以外)があるため適応されません。
こんな時は「:first-of-type」へ。
ニャン易度

1行目の[h2]テキスト

1行目の[p]テキスト ここだけ水色にしたいのに...

2行目の[p]テキスト

3行目の[p]テキスト

<div class="div_blok3">
	<h2>[div_blok3]内の1行目の[h2]テキスト</h2>
	<p>[div_blok3]内の1行目の[p]テキスト</p>
	<p>[div_blok3]内の2行目の[p]テキスト</p>
	<p>[div_blok3]内の3行目の[p]テキスト</p>
</div>
.div_blok3 p {
	background: #FFCCBC;
}
.div_blok3 p:first-child {
	background: #90CAF9;
}

:first-of-type

兄弟要素のグループの中でその種類の最初の要素を指定します。

ニャン易度
入れ子になっていても[div_blok1]のなかの最初の[p]だけが水色になる
デフォルトの[p]はオレンジ色

1行目の[h2]テキスト

1行目の[p]テキスト ここだけ水色にしたい

2行目の[p]テキスト

3行目の[p]テキスト

<div class="div_blok1">
	<h2>[div_blok1]内の1行目の[h2]テキスト</h2>
	<p>[div_blok1]内の1行目の[p]テキスト</p>
	<p>[div_blok1]内の2行目の[p]テキスト</p>
	<p>[div_blok1]内の3行目の[p]テキスト</p>
</div>
.div_blok1 p {
	background: #FFCCBC;
}
.div_blok1 p:first-of-type {
	background: #90CAF9;
}

:last-child

兄弟要素のグループの中でその種類の最後の要素を指定します。

ニャン易度
[div_blok1]内の最後の[p]だけ背景がオレンジ色
[div_blok1]内の[p]のデフォルトは背景が水色

ここからクラス名[div_blok1]のdiv↓

[div class="div_blok1"]内の1行目の[p]テキスト

[div class="div_blok1"]内の2行目の[p]テキスト

[div class="div_blok1"]内の3行目の[p]テキスト

ここまでクラス名[div_blok1]のdiv↑

[div_blok3]内の最後の[li]だけ背景がピンク色
[div_blok3]内の[li]のデフォルトは背景が緑色

ここからクラス名[div_blok2]のdiv↓
  • [div class="div_blok2"]内の1行目の[li]テキスト
  • [div class="div_blok2"]内の2行目の[li]テキスト
  • [div class="div_blok2"]内の3行目の[li]テキスト
ここまでクラス名[div_blok2]のdiv↑
<div class="div_blok1">
	<p>[div_blok1]内の1行目の[p]テキスト</p>
	<p>[div_blok1]内の2行目の[p]テキスト</p>
	<p>[div_blok1]内の3行目の[p]テキスト</p>
</div>
<div class="div_blok2">
	<ul>
	<li>[div_blok2]内の1行目の[li]テキスト</li>
	<li>[div_blok2]内の2行目の[li]テキスト</li>
	<li>[div_blok2]内の3行目の[li]テキスト</li>
	</ul>
</div>
.div_blok1 p {
	background: #90CAF9;
}
.div_blok1 p:last-child {
	background: #FFCCBC;
}
.div_blok2 li {
	background: #A5D6A7;
}
.div_blok2 li:last-child {
	background: #F8BBD0;
}

ただし「:last-child」を設定した要素の最後のアイテムAよりも後に他の要素がある場合は適応されません。
「p:last-child」の場合、アイテムAは[p]となります。
本来[p]の最後行だけ水色にし、それ以外は水色にしたいのですが、最後行に[h2](指定している[p]以外)があるため適応されません。
こんな時は「:last-of-type」へ。

ニャン易度

[p]1行目のテキスト

[p]2行目のテキスト

[p]最後行のテキスト ここだけ水色にしたいのに...

[h2]テキスト

<div class="div_blok3">
	<p>[div_blok3]内の1行目の[p]テキスト</p>
	<p>[div_blok3]内の2行目の[p]テキスト</p>
	<p>[div_blok3]内の3行目の[p]テキスト</p>
	<h2>[div_blok3]内の1行目の[h2]テキスト</h2>
</div>
.div_blok3 p {
	background: #FFCCBC;
}
.div_blok3 p:first-child {
	background: #90CAF9;
}

:last-of-type

兄弟要素のグループの中でその種類の最後の要素を指定します。

ニャン易度
入れ子になっていても[div_blok1]のなかの最後の[p]だけが水色になる
デフォルトの[p]はオレンジ色

[p]1行目のテキスト

[p]2行目のテキスト

[p]最後行のテキスト ここだけ水色にしたい

[h2]テキスト

<div class="div_blok1">
	<p>[div_blok1]内の1行目の[p]テキスト</p>
	<p>[div_blok1]内の2行目の[p]テキスト</p>
	<p>[div_blok1]内の3行目の[p]テキスト</p>
	<h2>[div_blok1]内の1行目の[h2]テキスト</h2>
</div>
.div_blok1 p {
	background: #FFCCBC;
}
.div_blok1 p:last-of-type {
	background: #90CAF9;
}

「***-child」と「***-of-type」は何が違う?

:first-childの場合
まずは並び順をみて、一番上の要素が指定した要素と一緒かどうかをみます。なので一番上に一致する要素が無いと「cssが効かない」ということになります。
:first-of-typeの場合
逆に、指定した要素だけを数えて最初のアイテムとなります。なので、「:first-child」で効かなかったものが効くようになります。
要素関係なく上から(下から)何番目を指定したいときは「***-child」、要素を限定して上から(下から)何番目を指定したいときは「***-of-type」ということになります。

何番目などの限定的な指定

:nth-child()/:nth-last-child()

:nth-child()も:nth-last-child()兄弟要素のグループの中での位置に基づいて選択です。
:nth-child()は最初から数え、:nth-last-child()最後から数えます。

odd/even

odd:奇数番目の要素
:nth-child(odd)は:nth-child(2n+1)と同様です。
even:偶数番目の要素
:nth-child(even)は:nth-child(2n)と同様です。

ニャン易度

1つ目の[p] 奇数なので水色

2つ目の[p] 偶数なのでオレンジ色

1つ目の[div] 奇数なので水色
2つ目の[div] 偶数なのでオレンジ色

3つ目の[p] 奇数なので水色

3つ目の[div] 偶数なのでオレンジ色
4つ目の[div] 奇数なので水色

4つ目の[p] 偶数なのでオレンジ色

1つ目の[span] 奇数なので水色
<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 :nth-child(odd) {
	background: #90CAF9;
}
.div_blok1 :nth-child(even) {
	background: #FFCCBC;
}

:nth-child(3) 上から3番目
ニャン易度

1つ目の[p]

2つ目の[p]

1つ目の[div] 上から数えて3番目なのでこれだけ水色
2つ目の[div]

3つ目の[p]

3つ目の[div]
4つ目の[div]

4つ目の[p]

1つ目の[span]
<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 :nth-child(3) {
	background: #90CAF9;
}
:nth-child(3n) 3番目[3×1], 6番目[3×2], 9番目[3×3]…
ニャン易度

1つ目の[p]

2つ目の[p]

1つ目の[div] 上から数えて3番目なのでオレンジ色
2つ目の[div]

3つ目の[p]

3つ目の[div] 上から数えて6番目なのでオレンジ色
4つ目の[div]

4つ目の[p]

1つ目の[span] 上から数えて9番目なのでオレンジ色
<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 :nth-child(3n) {
	background: #FFCCBC;
}
:nth-child(3n+4) 4番目[(3×0)+4], 7番目[(3×1)+4], 10番目[(3×2)+4]…
ニャン易度

1つ目の[p]

2つ目の[p]

1つ目の[div]

3つ目の[p] 水色

2つ目の[div]

4つ目の[p]

1つ目の[span] 水色
3つ目の[div]

5つ目の[p]

6つ目の[p] 水色

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 :nth-child(3n+4) {
	background: #90CAF9;
}
:nth-child(-n+4) 最初の4つの要素[-0+3,-1+3,-2+3,-3+3]
ニャン易度

1つ目の[p] オレンジ色

2つ目の[p] オレンジ色

1つ目の[div] オレンジ色

3つ目の[p] オレンジ色

2つ目の[div]

4つ目の[p]

1つ目の[span]
3つ目の[div]

5つ目の[p]

6つ目の[p]

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 :nth-child(-n+4) {
	background: #FFCCBC;
}
:nth-child(n+3):nth-child(-n+6) 要素の3〜6番目
ニャン易度

1つ目の[p]

1つ目の[span]

2つ目の[p] 上から3〜6番以内なのでオレンジ色

3つ目の[p] 上から3〜6番以内なのでオレンジ色

1つ目の[div] 上から3〜6番以内なのでオレンジ色

4つ目の[p] 上から3〜6番以内なのでオレンジ色

2つ目の[div]

5つ目の[p]

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 :nth-child(n+3):nth-child(-n+6) {
	background: #FFCCBC;
}
:nth-of-type()/:nth-last-of-type()

「***-of-type」なのでいずれも指定した要素だけを数えてから位置に基づいた要素に反映されます。
:nth-of-type()は最初から数え、:nth-last-of-type()は最後から数えます。

odd/even

odd:奇数番目の要素
:nth-of-type(odd)は:nth-of-type(2n+1)と同様です。
even:偶数番目の要素
:nth-of-type(even)はtr:nth-of-type(2n)と同様です。

ニャン易度
[p]で偶数ならオレンジ色、[p]で奇数なら水色に指定

1つ目の[p] [p]で奇数なので水色

1つ目の[span] [p]じゃないので無色

2つ目の[p] [p]で偶数なのでオレンジ色

3つ目の[p] [p]で奇数なので水色

1つ目の[div] [p]じゃないので無色

4つ目の[p] [p]で偶数なのでオレンジ色

2つ目の[div] [p]じゃないので無色

5つ目の[p] [p]で奇数なので水色

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 p:nth-of-type(odd) {
	background: #90CAF9;
}
.div_blok1 p:nth-of-type(even) {
	background: #FFCCBC;
}

:nth-of-type(3) 指定の要素だけをみてその要素の3番目
ニャン易度
[p]のみを上から数えて3番目を水色に指定

1つ目の[p]

2つ目の[p]

1つ目の[div]
2つ目の[div]

3つ目の[p] これだけ水色

3つ目の[div]
4つ目の[div]

4つ目の[p]

1つ目の[span]
<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 p:nth-of-type(3) {
	background: #90CAF9;
}
:nth-of-type(3n) 3番目[3×1], 6番目[3×2], 9番目[3×3]…
ニャン易度
[p]のみを上から数えて3番目,6番目,9番目...をオレンジ色に指定

1つ目の[p]

2つ目の[p]

1つ目の[div]

3つ目の[p] オレンジ色

2つ目の[div]

4つ目の[p]

1つ目の[span]
3つ目の[div]

5つ目の[p]

6つ目の[p] オレンジ色

4つ目の[div]

7つ目の[p]

8つ目の[p]

2つ目の[span]

9つ目の[p] オレンジ色

10個目の[p]

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<span>テキスト</span>
	<p>テキスト</p>
	<p>テキスト</p>
	<span>テキスト</span>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 p:nth-of-type(3n) {
	background: #FFCCBC;
}
:nth-of-type(3n+4) 4番目[(3×0)+4], 7番目[(3×1)+4], 10番目[(3×2)+4]…
ニャン易度
[p]のみを上から数えて4番目,7番目,10番目...を水色に指定

1つ目の[p]

2つ目の[p]

1つ目の[div]

3つ目の[p]

2つ目の[div]

4つ目の[p] 水色

1つ目の[span]
3つ目の[div]

5つ目の[p]

6つ目の[p]

4つ目の[div]

7つ目の[p] 水色

8つ目の[p]

2つ目の[span]

9つ目の[p]

10個目の[p] 水色

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<span>テキスト</span>
	<p>テキスト</p>
	<p>テキスト</p>
	<span>テキスト</span>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 p:nth-of-type(3n+4) {
	background: #90CAF9;
}
:nth-of-type(-n+4) 最初の4つの要素[-0+3,-1+3,-2+3,-3+3]
ニャン易度
[p]のみを上から数えて最初の4つをオレンジ色に指定

1つ目の[p] オレンジ色

2つ目の[p] オレンジ色

1つ目の[div]

3つ目の[p] オレンジ色

2つ目の[div]

4つ目の[p] オレンジ色

1つ目の[span]
3つ目の[div]

5つ目の[p]

6つ目の[p]

4つ目の[div]

7つ目の[p]

8つ目の[p]

2つ目の[span]

9つ目の[p]

10個目の[p]

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<span>テキスト</span>
	<p>テキスト</p>
	<p>テキスト</p>
	<span>テキスト</span>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 p:nth-of-type(-n+4) {
	background: #FFCCBC;
}
:nth-of-type(n+3) nth-of-type(-n+6)はグループ内の指定した要素の3〜6番目
ニャン易度
[p]のみを上から数えて3〜6番目をオレンジ色に指定

1つ目の[p]

2つ目の[p]

1つ目の[div]

3つ目の[p] オレンジ色

2つ目の[div]

4つ目の[p] オレンジ色

1つ目の[span]
3つ目の[div]

5つ目の[p] オレンジ色

6つ目の[p] オレンジ色

4つ目の[div]

7つ目の[p]

8つ目の[p]

2つ目の[span]

9つ目の[p]

10個目の[p]

<div class="div_blok1">
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<span>テキスト</span>
	<p>テキスト</p>
	<p>テキスト</p>
	<span>テキスト</span>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
	<div>テキスト</div>
	<p>テキスト</p>
	<p>テキスト</p>
</div>
.div_blok1 p:nth-of-type(n+3):nth-of-type(-n+6) {
	background: #FFCCBC;
}
:only-child

兄弟要素がない要素を表します。親グループの中に子要素が一つしかないものに対して適用させることができます。

ニャン易度
同じグループ内に兄弟要素のないアイテムを水色に指定

1つ目の[p] 同じグループに他にも要素があるので無色

1つ目の[div] 同じグループに他にも要素があるので無色
2つ目の[div] 同じグループに他にも要素があるので無色

2つ目の[div] の中の唯一の[p] 2つ目の[div]グループ内に他に要素がないので水色

3つ目の[div] 同じグループに他にも要素があるので無色 3つ目の[div] の中の唯一の[span] 3つ目の[div]グループ内に他に要素がないので水色
<div class="div_blok1">
	<p>テキスト</p>
	<div>テキスト</div>
	<div>テキスト
		<p>テキスト</p>
	</div>
	<div>テキスト
		<span>テキスト</span>
	</div>
</div>
.div_blok1 :only-child {
	background: #90CAF9;
}

:only-of-type

同じ型の兄弟要素がない要素を表します。つまりグループのなかで唯一の要素を探して適用させることができます。

ニャン易度
同じグループ内に唯一の要素のみオレンジ色
1つ目の[div]

唯一の[p]なのでオレンジ色

2つ目の[div]
3つ目の[div] 3つ目の[div]の中の唯一の[i]なのでオレンジ色 3つ目の[div]の中の1つ目の[em] 3つ目の[div]の中の2つ目の[em]
<div class="div_blok1">
	<div>テキスト</div>
	<p>テキスト</p>
	<div>テキスト</div>
	<div>テキスト
		<i>テキスト</i>
		<em>テキスト</em>
		<em>テキスト</em>
	</div>
</div>
.div_blok1 :only-of-type {
	background: #FFCCBC;
}

その他アイデア次第で使えそうなもの(ブラウザ制限あり)

:not()

セレクターに一致しない要素を表す(「それ以外」を指定できる)
sampleでは[p(classが.blue)]は水色それ以外の[p]は緑色[p]以外はオレンジ色になります。
ブラウザ対応:https://caniuse.com/#search=not()

ニャン易度

pのclassなしテキスト1 緑色

pのclassなしテキスト2 緑色

divのテキスト pでは無いのでオレンジ色

class="blue"のついたpのテキスト3 水色

<div class="div_blok1">
	<p>pのclassなしテキスト1 緑色</p>
	<p>pのclassなしテキスト2 緑色</p>
	<div>divのテキスト pでは無いのでオレンジ色</div>
	<p class="blue">class="blue"のついたpのテキスト3 水色</p>
</div>
.div_blok1 p.blue {
	background: #90CAF9;
}
.div_blok1 p:not(.blue) {
	background: #A5D6A7;
}
.div_blok1 :not(p) {
	background: #FFCCBC;
}

:in-range/:out-of-range

:in-rangeは現在の値が min および max 属性による制限範囲内である「input」要素を表します。
:out-of-rangeは現在の値が min および max 属性による制限範囲外である「input」要素を表します。
sampleは1〜10までは水色にそれ以外はオレンジ色になります。
ブラウザ対応がOKなら今までjsでやっていたことがこれだけでできるんですけどね。
ブラウザ対応:https://caniuse.com/#search=in-range

ニャン易度
<input id="value" type="number" placeholder="1〜10なら水色それ以外はオレンジ色" min="1" max="10" value="">
<label for="value"></label>
input:in-range {
	background: #90CAF9;
}
input:out-of-range {
	background: #FFCCBC;
}
input:in-range + label::after {
  content: '範囲内';
}
input:out-of-range + label::after {
  content: '範囲外';
}

:target

URL のフラグメントに一致する id を持つ固有の要素を表します。
sampleではリンクをクリックするとターゲットとなるidをもつ要素に水色がつきます。
作り方によっては、モーダルウィンドウなどの表現も可能ですね。
ただし、スムーズスクロールなどのjsを入れているとうまく動かなかったりしますのでお気をつけください。
ブラウザ対応:https://caniuse.com/#search=%3Atarget

といった具合で、cssを適用したい条件をパターン化して整理すれば、いちいち設定するよりも早く適用させることができますね。みなさんも色々試してみてはいかがでしょう?

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?