CSSレイアウトの幅を広げる！「次の要素」セレクターで実現できる高度なデザインテクニック
2024-07-27
CSSにおける「次の要素」セレクターの構文
CSSで要素をスタイルするには、セレクターと呼ばれる仕組みを使用します。セレクターは、スタイルを適用したい要素を特定するための方法です。
次の要素セレクター
次の要素セレクターは、ある要素の直後に続く要素を選択するためのセレクターです。構文は以下の通りです。
要素1 + 要素2
ここで、
要素1は、最初の要素を指定するセレクターです。+は、次の要素セレクターを表す記号です。
例
以下のHTMLとCSSを見てみましょう。
<div class="container">
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>
</div>
.container p + .text2 {
color: red;
}
このCSSは、.container クラスを持つ要素の子要素のうち、.text1 クラスを持つ要素の直後に続く .text2 クラスを持つ要素に赤色を適用します。
結果として、以下のようになります。
<div class="container">
<p class="text1">テキスト1</p>
<p class="text2" style="color: red;">テキスト2</p>
<p class="text3">テキスト3</p>
</div>
注意点
- 次の要素セレクターは、直後に続く要素のみを対象とします。間に他の要素があっても、選択されません。
- 他のセレクターと組み合わせて使用することができます。
- 擬似クラスや疑似要素と組み合わせて使用することもできます。
CSSには、次の要素セレクター以外にも、様々なセレクターがあります。それぞれのセレクターの役割を理解することで、より柔軟にCSSを使いこなすことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>次の要素セレクター</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">見出し</h1>
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>
</div>
</body>
</html>
CSS
.container h1 + .text1 {
font-size: 1.2em;
font-weight: bold;
}
.container .text2 {
color: red;
}
.container .text3 + p {
background-color: #f0f0f0;
}
説明
このコードでは、以下のスタイルを適用します。
.containerクラスを持つ要素の子要素のうち、h1クラスを持つ要素の直後に続く.text1クラスを持つ要素のフォントサイズを1.2em、フォントウェイトを太字にします。.containerクラスを持つ要素の子要素である.text2クラスを持つ要素に赤色を適用します。
結果
ブラウザでこのコードを実行すると、以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>次の要素セレクター</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">**見出し**</h1> <p class="text1">テキスト1</p>
<p class="text2">テキスト2</p> <p class="text3">テキスト3</p>
<p style="background-color: #f0f0f0;"></p>
</div>
</body>
</html>
要素1 ~ 要素2
<div class="container">
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>
</div>
.container p ~ .text2 {
color: red;
}
<div class="container">
<p class="text1">テキスト1</p>
<p class="text2" style="color: red;">テキスト2</p>
<p class="text3">テキスト3</p>
</div>
- 隣接兄弟セレクターは、直後に別の要素がある場合のみ、その要素を選択します。間に他の要素があっても、選択されません。
JavaScriptを使用する
JavaScriptを使用して、要素を動的に操作することもできます。例えば、ある要素の後に別の要素を追加する際に、その新しい要素にスタイルを適用することができます。
以下のJavaScriptコードは、.container クラスを持つ要素の子要素である .text1 クラスを持つ要素の直後に新しい <p> 要素を追加し、その要素に赤色を適用します。
const container = document.querySelector('.container');
const text1 = container.querySelector('.text1');
const newElement = document.createElement('p');
newElement.textContent = '新しいテキスト';
newElement.style.color = 'red';
text1.parentNode.insertBefore(newElement, text1.nextSibling);
子要素セレクターと組み合わせる
子要素セレクターと組み合わせることで、より柔軟に要素を選択することができます。例えば、ある要素の直後のすべての子要素を選択することができます。
.container .text1 > * {
color: red;
}
html css css-selectors
