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

:only-of-type擬似クラスは、親要素の子要素の中で、その要素と同じ種類の要素（タグ名が同じ要素）が他に存在しない場合に、その要素を選択するための擬似クラスです。この擬似クラスは、ある要素がその親要素の子要素として、かつ特定のタグ名を持つ要素の中で唯一である場合にのみスタイルを適用したいときに使用されます。

例えば、HTML文書において、ある<section>要素の中に<p>要素が複数ある場合、:only-of-typeはそのどの<p>要素にも適用されません。しかし、もしその<section>の中に<p>要素がたった一つだけで、他の<p>要素が一つも存在しない場合に限り、その唯一の<p>要素にスタイルを適用することができます。<span>要素や<div>要素など、他の種類の要素が同じ親要素の中に存在していても、選択される要素と同じ種類の要素が一つだけならば、:only-of-typeは有効です。

この機能は、特定のタグ名を持つ要素が兄弟要素の中で単独で出現するときにスタイルを適用したい場合に非常に有効です。たとえば、ブログ記事のセクション内で見出し（<h1>や<h2>など）が一つだけの場合や、リスト（<ul>）の中に特定のアイテム（<li>）が一つしかない場合にその要素を装飾するといった用途で利用されます。また、動的に内容が変化するWebページで、特定の種類のコンテンツ要素が一つだけ追加されたときに自動的に特定のスタイルを適用するといった柔軟なスタイリングを可能にします。これにより、HTMLのマークアップをシンプルに保ちながら、要素の出現条件に応じた洗練されたデザインを実現できます。システムエンジニアを目指す方にとって、Webページの見た目を柔軟に制御するための基本的ながら強力なツールの一つとなるでしょう。

Copy
1p:only-of-type {
2  /* ここにスタイルを記述 */
3  color: blue;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません