CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの一般兄弟セレクター（〜）とは？基本構文と使い方を実例で解説

CSSの一般兄弟セレクター（General Sibling Combinator）は、基準となる要素の後ろに続く兄弟要素をすべて選択するためのセレクターです。基準要素と対象要素が同じ親要素を持つ場合にのみ適用されます。

隣接兄弟セレクター（+）が直後の1つの要素だけを選択するのに対し、一般兄弟セレクター（~）は後続する該当要素をすべてまとめて選択できる点が特徴です。

基本構文

CSS一般兄弟セレクターの構文は以下のとおりです。

element ~ element {
    /* 宣言 */
}

波線（~）の左側に基準となる要素、右側に選択したい要素を記述します。これにより、左側の要素より後に現れる右側の要素すべてにスタイルが適用されます。

以下の例で、CSS一般兄弟セレクターの動作を確認してみましょう。

使用例1：p要素の後にあるul要素を選択

<!DOCTYPE html>
<html>
<head>
<style>
* {
    float: left;
    padding-left: 14px;
    list-style: none;
}
p ~ ul {
    box-shadow: inset 4px 0 3px lime;
}
</style>
</head>
<body>
<ul>
<li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li>
<li><img src="https://www.tutorialspoint.com/images/db2.png"></li>
<li><img src="https://www.tutorialspoint.com/images/sql.png"></li>
</ul>
</body>
</html>

この例では p ~ ul を指定しているため、p要素より後に記述されたすべてのul要素に影（box-shadow）が適用されます。最初のul要素はp要素より前にあるため、スタイルの対象外になります。

実行結果

上記コードの表示結果は次のとおりです。

CSSの一般兄弟セレクター（〜）とは？基本構文と使い方を実例で解説

使用例2：img要素の後にあるp要素を選択

<!DOCTYPE html>
<html>
<head>
<style>
* {
    float: left;
    padding: 10px;
    list-style: none;
}
img ~ p {
    background-color: burlywood;
}
</style>
</head>
<body>
<p>This is demo text.</p>
<img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>
</body>
</html>

この例では img ~ p を指定しています。画像より前にあるp要素には背景色が適用されず、画像より後に記述されたp要素のみに背景色（burlywood）が設定されます。

実行結果

上記コードの表示結果は次のとおりです。

CSSの一般兄弟セレクター（〜）とは？基本構文と使い方を実例で解説

まとめ

一般兄弟セレクター（~）を使うことで、特定の要素以降に存在する兄弟要素を効率的に一括スタイリングできます。「直後の要素だけ」なら隣接兄弟セレクター（+）、「それ以降のすべて」なら一般兄弟セレクター（~）というように、用途に応じて使い分けるとよいでしょう。

  1. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu

  2. CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方

    CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま