CSSの:only-of-typeセレクターとは？親要素内で唯一の要素だけをスタイリングする方法
CSSの:only-of-typeセレクターは、親要素の中で同じ種類（タグ名）の要素が1つしか存在しない場合に、その要素だけを選択してスタイルを適用できる擬似クラスです。たとえば、親要素内に<p>要素が1つだけある場合にのみ、その<p>要素へスタイルを指定したいときに便利です。
:only-of-typeセレクターの基本構文
基本的な書き方は以下のとおりです。
p:only-of-type {
/* スタイルの指定 */
}
この記述により、「親要素内で唯一の<p>要素」である場合にだけスタイルが適用されます。兄弟要素として他の<p>要素が存在する場合は、スタイルは適用されません。
使用例
以下のコードでは、最初の<div>には<p>要素が1つしかないため、その段落にだけオレンジ色の背景と白い文字色が適用されます。2つ目の<div>には<p>要素が3つあるため、そちらの段落にはスタイルが反映されません。
<!DOCTYPE html>
<html>
<head>
<style>
p:only-of-type {
background: orange;
color: white;
}
</style>
</head>
<body>
<div>
<p>これはデモテキスト1です。</p>
</div>
<div>
<p>これはデモテキスト2です。</p>
<p>これはデモテキスト3です。</p>
<p>これはデモテキスト4です。</p>
</div>
</body>
</html>
表示結果のポイント
- 1つ目の<div>：<p>要素が1つだけなので、「これはデモテキスト1です。」の段落に背景色オレンジ・文字色白のスタイルが適用されます。
- 2つ目の<div>：<p>要素が複数存在するため、どの段落にもスタイルは適用されません。
類似の擬似クラスとの違い
:only-of-typeは「要素の種類」に着目する点が特徴です。よく混同される擬似クラスとの違いを整理しておきましょう。
- :only-child：親要素内で唯一の「子要素」である場合に選択します。要素の種類は問いません。
- :first-of-type / :last-of-type：同じ種類の要素の中で最初・最後の要素を選択します。
このように:only-of-typeを使いこなすことで、JavaScriptを使わずにCSSだけで柔軟な条件付きスタイリングが可能になります。
-
CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法
CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*
-
CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説
CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white