CSSの:emptyセレクターとは？空の要素だけをスタイリングする方法
CSSの:emptyセレクターを使用すると、子要素やテキストを一切持たない「空の」要素だけを選択し、スタイルを適用できます。たとえば、中身が空の<p>要素にだけ別の背景色を設定するといった表現が、シンプルな記述で実現可能です。
:emptyセレクターの基本
:emptyは擬似クラスの一つで、子ノード（テキストノードを含む）をまったく持たない要素にマッチします。ただし、要素内に半角スペースや改行などの空白文字が含まれると「空」とみなされず、スタイルが適用されない点に注意が必要です。
実装例
以下のコードでは、通常の<p>要素にはグレーの背景色が適用され、一方で中身が空の<p>要素にはオレンジ色の背景色が適用されます。実際にコードを実行して、表示の違いを確認してみてください。
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
width: 300px;
height: 20px;
background: gray;
}
p:empty {
width: 150px;
height: 20px;
background: orange;
}
</style>
</head>
<body>
<p class="demo">これはデモテキストです。この下に空のテキストがあります。</p>
<p></p>
</body>
</html>活用のポイント
- 適用条件： 子要素・テキストをまったく含まない要素にのみ適用されます。
- 注意点： 要素内に空白文字が1つでもあると「空」と判定されません。
- 主な用途： 検索結果が空の場合のメッセージ表示や、未入力フィールドの強調表示などに便利です。
このように:emptyセレクターを活用すれば、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