【CSS Modules】:only-child疑似クラスの使い方

:only-childクラスは、親要素の中で他の兄弟要素が一切存在せず、その要素が唯一の子要素であるという状態を持つHTML要素を表すクラスです。このCSS疑似クラスは、特定の要素が親の直下で唯一無二の子要素である場合に、その要素にスタイルを適用するために使用されます。

具体的には、あるHTML要素が:only-childの条件を満たすには、その親要素が持つすべての子要素の中で、対象の要素が唯一のものである必要があります。例えば、<div class="container"><span>単独の要素</span></div> のような構造では、span:only-childというCSSルールは<span>要素にマッチします。しかし、<div class="container"><span>最初の要素</span><p>二番目の要素</p></div> のように、親要素が複数の子要素を持つ場合、たとえ<span>要素が最初の子要素であっても、:only-childの条件は満たされません。この条件は、子要素の種類に関わらず、兄弟要素が一つでも存在すれば適用されません。

この:only-child疑似クラスは、ウェブページのデザインにおいて、コンテンツの構造に応じた柔軟なスタイリングを実現する際に非常に有用です。例えば、画像が単独で表示される場合に特別な枠線を付けたり、リスト項目が一つしかない場合に他のリストとは異なる余白を設定したりする際に応用できます。これにより、HTMLのマークアップを複雑にすることなく、特定の表示状況に合わせた動的なスタイル調整が可能になります。

Copy
1li:only-child {
2  background-color: yellow;
3  font-weight: bold;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません