CSSの子要素セレクタ：親要素と子要素の関係を活かしたスタイル適用
CSSを使って子要素にスタイルを適用するには、いくつか方法があります。それぞれの特徴と使い分けを以下に説明します。
子要素セレクタ
これは最も基本的な方法で、親要素と子要素の関係を使ってスタイルを適用します。記法は以下の通りです。
親要素 > 子要素 {
スタイル;
}
例:
.parent > p {
color: red;
font-weight: bold;
}
この例では、.parent クラスを持つ要素の子要素である <p> 要素全てに、赤色で太字のスタイルが適用されます。
隣接兄弟セレクタ
これは、ある要素の直後に続く兄弟要素にスタイルを適用する方法です。記法は以下の通りです。
親要素 > 子要素 + 隣接兄弟要素 {
スタイル;
}
.parent > p + h2 {
margin-top: 20px;
}
親要素 > 子要素 ~ 隣接兄弟要素 {
スタイル;
}
.parent > p ~ h2 {
margin-top: 20px;
}
親要素 子孫要素 {
スタイル;
}
.parent ul li {
list-style-type: none;
padding: 10px;
}
ユニバーサルセレクタ
* {
スタイル;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
この例では、全ての要素に、マージンなし、パディングなし、ボックスサイズ境界線込みのスタイルが適用されます。
補足
- 上記以外にも、属性セレクタや擬似クラスセレクタなどを組み合わせることで、より複雑な条件で子要素にスタイルを適用することができます。
- スタイルの継承によっては、明示的にスタイルを指定しなくても、親要素のスタイルが子要素に適用される場合があります。
以下に、CSSで子要素にスタイルを適用する際のサンプルコードをいくつか紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
background-color: #f0f0f0;
padding: 20px;
}
.parent > p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<p>これは親要素の子要素の段落です。</p>
<p>これはもう一つの親要素の子要素の段落です。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
background-color: #f0f0f0;
padding: 20px;
}
.parent > p + h2 {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
<p>これは親要素の子要素の段落です。</p>
<h2>見出し</h2>
<p>これは親要素の子要素の段落です。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
background-color: #f0f0f0;
padding: 20px;
}
.parent > p ~ h2 {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
<p>これは親要素の子要素の段落です。</p>
<h2>見出し</h2>
<p>これは親要素の子要素の段落です。</p>
<p>これは親要素の子要素の段落です。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
background-color: #f0f0f0;
padding: 20px;
}
.parent ul li {
list-style-type: none;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent">
<ul>
<li>リスト項目1</li>
<li>リスト項目2
<ul>
<li>サブリスト項目1</li>
<li>サブリスト項目2</li>
</ul>
</li>
<li>リスト項目3</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
line-height: 1.5;
}
</style>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。</p>
</body>
</html>
CSSで子要素にスタイルを適用するその他の方法
上記で説明した方法以外にも、CSSで子要素にスタイルを適用する方法はいくつかあります。以下に、いくつか例を挙げます。
要素[属性名="属性値"] {
スタイル;
}
a[href^="https://"] {
color: blue;
}
この例では、href 属性の値が "https://" で始まる全ての <a> 要素に、青色のスタイルが適用されます。
擬似クラスセレクタは、要素の状態や動作を表すために使用するセレクタです。記法は以下の通りです。
要素:擬似クラス {
スタイル;
}
li:hover {
background-color: #f0f0f0;
}
この例では、マウスカーソルが <li> 要素の上に置かれた時に、その要素の背景色を #f0f0f0 に変更します。
組み合わせ
上記で説明した方法は、組み合わせて使用することができます。例えば、以下のように、子要素セレクタと属性セレクタを組み合わせることで、より具体的な条件でスタイルを適用することができます。
.parent > p[class="important"] {
font-weight: bold;
}
要素:nth-child(n) {
スタイル;
}
ul li:nth-child(odd) {
background-color: #f0f0f0;
}
この例では、<ul> 要素の子要素である <li> 要素のうち、奇数番目の要素全てに、背景色 #f0f0f0 を設定します。
JavaScriptを使って、動的に要素にスタイルを適用することもできます。例えば、以下のように、マウスカーソルが <li> 要素の上に置かれた時に、その要素の背景色を変更するコードを書いています。
const lis = document.querySelectorAll('li');
lis.forEach(li => {
li.addEventListener('mouseover', () => {
li.style.backgroundColor = '#f0f0f0';
});
li.addEventListener('mouseout', () => {
li.style.backgroundColor = '';
});
});
CSSで子要素にスタイルを適用する方法は、いくつかあります。それぞれの特徴と使い分けを理解して、適切な方法を選択してください。
css css-selectors
