CSS子要素セレクタ解説
CSS セレクタ - 特定の子要素を持つ要素
CSS セレクタは、HTML文書内の特定の要素をターゲットにするために使用される規則です。その中でも、特定の子要素を持つ要素をターゲットにするセレクタは、親要素と子要素の関係に基づいて選択を行います。
基本的な構文
parent > child
child: 子要素のセレクタです。parent: 親要素のセレクタです。
この構文は、parent要素の直接の子要素であるchild要素を選択します。
例
<div>
<p>Paragraph 1</p>
<span>Span 1</span>
</div>
<div>
<span>Span 2</span>
</div>
div > p {
color: blue;
}
このCSSルールは、div要素の直接の子要素であるp要素のテキストを青色にします。
複数のレベル
子要素がさらに子要素を持つ場合、複数のレベルのセレクタを使用できます。
div > p > span {
color: red;
}
このルールは、div要素の直接の子要素であるp要素の直接の子要素であるspan要素のテキストを赤色にします。
任意の子孫
子要素のレベルに関係なく、任意の子孫を選択するには、（スペース）を使用します。
div span {
color: green;
}
このルールは、div要素の子孫であるすべてのspan要素のテキストを緑色にします。
複数の条件
複数の条件を組み合わせることもできます。
div.container > p.important {
font-weight: bold;
}
このルールは、クラス名containerを持つdiv要素の直接の子要素であり、かつクラス名importantを持つp要素のフォントを太字にします。
CSS子要素セレクタ解説 - 例コード
CSS子要素セレクタは、親要素の直接の子要素をターゲットにするためのセレクタです。
parent > child
直接の子要素を選択
<div>
<p>Paragraph 1</p>
<span>Span 1</span>
</div>
<div>
<span>Span 2</span>
</div>
div > p {
color: blue;
}
複数のレベルの選択
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
div > ul > li {
font-weight: bold;
}
任意の子孫を選択
<div>
<p>
<span>Span 1</span>
</p>
</div>
div span {
color: red;
}
複数の条件を組み合わせる
<div class="container">
<p class="important">Important paragraph</p>
</div>
.container > p.important {
background-color: yellow;
}
CSS子要素セレクタの代替方法
CSS子要素セレクタは、親要素の直接の子要素をターゲットにするためのセレクタです。しかし、特定の状況では、他の方法を使用することもできます。
汎用セレクタ
汎用セレクタである*を使用することで、任意の要素をターゲットにすることができます。ただし、この方法では、特定の要素を正確に選択することができないため、スタイルの適用が不正確になる可能性があります。
div * {
color: blue;
}
属性セレクタ
属性セレクタを使用することで、特定の属性を持つ要素をターゲットにすることができます。例えば、data-child属性を持つ要素をターゲットにするには、次のようにします。
<div>
<p data-child="true">Paragraph 1</p>
<span>Span 1</span>
</div>
[data-child="true"] {
font-weight: bold;
}
このCSSルールは、data-child属性の値がtrueである要素のフォントを太字にします。
JavaScript
JavaScriptを使用して、DOM操作を行い、特定の要素をターゲットにすることもできます。例えば、querySelector()メソッドを使用して、特定の要素を取得し、スタイルを適用することができます。
const parentElement = document.querySelector('.parent');
const childElement = parentElement.querySelector('p');
childElement.style.color = 'red';
このJavaScriptコードは、クラス名parentを持つ要素の直接の子要素であるp要素のテキストを赤色にします。
css css-selectors
