CSS 〜セレクタ解説
2024-09-22
"~" CSS セレクタの説明（日本語）
CSSにおける「~」セレクタは、指定された要素の直後の兄弟要素にマッチします。
具体的な使い方
/*
* <h1>タグの直後の兄弟要素である<p>タグにスタイルを適用します。
*/
h1 ~ p {
color: blue;
}
この例では、<h1>タグのすぐ後に続く<h2>タグにのみスタイルが適用されます。
重要ポイント
- 直後
間に他の要素が存在しないことを意味します。 - 兄弟要素
直前の要素と同じ親要素を持つ要素です。
他のセレクタとの比較
- > セレクタ: 子要素にマッチします。
「~」セレクタの具体例（日本語）
例1: 直後の兄弟要素にスタイルを適用
<div>
<h1>タイトル</h1>
<p>本文</p>
<p>もう一つの本文</p>
</div>
h1 ~ p {
color: blue;
}
<div>
<h2>サブタイトル</h2>
<p>本文</p>
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
</ul>
<p>もう一つの本文</p>
</div>
h2 ~ p, h2 ~ ul {
font-size: 14px;
}
例3: 複雑な条件での使用
<div>
<h1>タイトル</h1>
<nav>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
</ul>
</nav>
<p>本文</p>
</div>
nav ~ p {
margin-top: 20px;
}
親要素と子要素のセレクタ
- 子要素のセレクタ
親要素内の特定の子要素を指定します。
例
/* <h1>タグの直後の兄弟要素である<p>タグにスタイルを適用 */
div > h1 + p {
color: blue;
}
この例では、<div>要素の子要素である<h1>タグの直後の兄弟要素である<p>タグにスタイルを適用します。
JavaScriptによる操作
- DOM操作
JavaScriptを使用して、要素の属性やスタイルを直接変更します。
const h1 = document.querySelector('h1');
const nextSibling = h1.nextElementSibling;
nextSibling.style.color = 'blue';
この例では、JavaScriptを使用して<h1>タグの直後の兄弟要素のスタイルを変更します。
CSSのカスケードルール
- 特異度
セレクタの特異度に基づいてスタイルが適用されます。
/* <h1>タグの直後の兄弟要素である<p>タグにスタイルを適用 */
div > h1 + p {
color: blue;
}
/* より特異度の高いセレクタ */
div.container > h1 + p {
color: red;
}
この例では、特異度の高いセレクタが優先され、<p>タグのスタイルが赤色になります。
css css-selectors
