シュウ

今回は【CSS】構造擬似クラス:only-child、:only-of-typeの使い方
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• :only-child、:only-of-typeの使い方について学びたい方へ
• 今回は構造擬似クラスを学習しよう

only-childとonly-of-typeについての解説になります。
この2つの擬似クラスの共通点は「子要素が1つだけ」の時にCSSが適用されます。

構造擬似クラス

今回は構造擬似クラスの:only-child、:only-of-typeについての解説記事なります。
書き方は以下のようになります。

/*--only-child--*/
要素:only-child {プロパティ: 値;}

/*--only-of-type--*/
要素:only-of-type {プロパティ: 値;}

構造擬似クラス:only-childについて

:only-childとは、セレクタで指定した子要素が1つだけの時にスタイルが適用されます。

今回は、段落タグであるp要素を2つ用意し、
1つ目の段落には、strongタグを１つだけ使用しております。
2つ目の段落には、strongタグを2つ使用しております。

こよのうに、only-childとは子要素が1つだけの場合に適用されるため、「1つ目の段落(pのstrong)」のみに、CSSが適用されます。

<p><strong>黄色</strong>とは、はつらつ・陽気・活気・希望・愉快・注意 など</p>

<p><strong>光や輝きを連想させ、明るく、ユーモア</strong>を感じさせる快活な色味を表します。
<strong>元気を与える、注意を促す、集中力を上げるなどの心理効果</strong>を持っています。</p>

p strong:only-child {
	color: yellow;
}

構造擬似クラス:only-of-typeについて

:only-of-typeとは、セレクタで指定した子要素が、要素の種類に関係なく1つだけの時にスタイルが
適用されます。

今回は、div要素を2つ用意し、
1つ目の要素には、見出し(h3)と段落(p)を1つずつ使用しております。
2つ目の要素には、段落(p)を2つ使用しております。

こよのうに、1つ目の要素の中には見出し(h3)も含まれていますが、段落(p)は1つしかないため、CSSが適用されます。
2つ目の要素の中には段落(p)が2つあるため、CSSが適用されません。

<!--１つ目の要素-->
<div>
 <h3>only-of-typeの場合</h3>
 <p>黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など</p>
</div>

<!--2つ目の要素-->
<div>
 <p>光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。</p>
 <p>元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。</p>
</div>

div p:only-of-type {
	color: yellow;
}

only-childが効かない場合

最後に、only-childが効かない場合があります。
上記でonly-of-typeについて解説しましたが、子要素が1つだけならonly-childでも良いと思った方は多いと思います。

only-of-typeからonly-childに変更したら、 CSSが適用されなくなりました。
原因は、div要素の中に、他の要素(今回は見出しのh3)があるためです。

<div>
 <h3>only-of-typeの場合</h3>
 <p>黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など</p>
</div>

<div>
 <p>光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。</p>
 <p>元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。</p>
</div>

div p:only-child {
	color: yellow; /*--適用されない--*/
}

ポイント！
このように、only-of-typeとonly-childは使い分けが必要になってきます。
・子要素が1つだけの場合はonly-child
・指定した要素内に他の要素がある場合はonly-of-typeで指定するようにしましょう

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】構造擬似クラス:first-of-type、:last-of-typeの使い方

次の記事 >

【CSS】target擬似クラス lang擬似クラスの使い方！