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

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

CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。

これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。

CSSの高度なセレクターの種類

1. 隣接兄弟セレクター（+）

「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用します。

ul + h3

2. 一般兄弟セレクター（~）

「A ~ B」の形式で記述し、要素Aより後ろに存在するすべての要素Bにスタイルを適用します。隣接していなくても対象になります。

h1 ~ h3

3. 直接の子セレクター（>）

「A > B」の形式で記述し、要素Aの直接の子要素であるBだけにスタイルを適用します。孫要素以降は対象外です。

div > span

4. 属性セレクター（[ ]）

「[属性="値"]」の形式で記述し、特定の属性と値を持つ要素を選択します。リンク先URLなどで条件分岐的にスタイルを変えたい場合に便利です。

a[href="https://www.wikipedia.org"]

5. nth-of-typeセレクター

「:nth-of-type(n)」の形式で記述し、同じ種類の要素の中からn番目の要素を選択します。リストの特定項目だけ色を変えるといった装飾に活用できます。

ul:nth-of-type(1)

高度なセレクターを使用したサンプルコード

以下は、上記の高度なセレクターをすべて組み合わせたCSSとHTMLの実装例です。

<html>
<head>
<style>
#red {
    color: red;
}
.green {
    background: green;
}
ul:nth-of-type(1) {
    background: rgb(0, 174, 255);
}
ul + h3 {
    border: 4px solid rgb(19, 0, 128);
}
a[href="https://www.wikipedia.org"] {
    font-size: 25px;
}
h1 ~ h3 {
    font-size: 40px;
}
div > span {
    background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Text sample</span>
<p>
Paragraph Text
<span>span text</span>
</p>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>
</body>
</html>

実行結果のポイント

このコードをブラウザで表示すると、次のような結果が得られます。

  • 1つ目のul要素は ul:nth-of-type(1) により水色の背景が適用されます。
  • h3要素は ul + h3（直前がulのため）と h1 ~ h3 の両方が適用され、太い青い枠線と大きなフォントサイズ（40px）で表示されます。
  • div直下のspanのみ div > span によりドジャーブルーの背景色になり、pタグ内の孫要素のspanには適用されません。
  • wikipedia.orgへのリンクだけが属性セレクターによって25pxのフォントサイズで表示され、google.comへのリンクには影響しません。
  • class="green" の段落は緑背景、id="red" の段落は赤文字で表示されます。

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

このように高度なセレクターを組み合わせることで、HTML構造を変更せずにピンポイントでスタイルを制御できます。実際のWeb制作でも、コードの保守性を高めるために積極的に活用しましょう。

  1. CSSのグループセレクターとは？複数要素をまとめてスタイリングする方法

    CSSのグループセレクターは、複数の要素を一度に選択し、共通のスタイルをまとめて適用するための機能です。各要素に同じスタイルを個別に宣言する必要がなくなるため、コード量を大幅に削減でき、保守性も向上します。グループセレクターの基本セレクターをグループ化するには、各セレクターをカンマ（,）で区切って記述します。これにより、リストアップされたすべての要素に対して、同じ宣言ブロック内のスタイルが一括で適用されます。構文element, element {     /* 宣言 */ }それでは、具体的なコード例を見ていきましょう。例1：複数の要素に共通スタイルを

  2. CSS属性セレクターでフォームを美しくスタイリングする方法

    CSS属性セレクターとは CSSの属性セレクターを使用すると、特定の属性やその値を持つHTML要素だけを対象にスタイルを適用できます。フォームの入力欄やボタンのように、同じタグでも役割が異なる要素を個別に装飾したい場合に特に便利です。 属性セレクターには、主に以下のような記述ルールがあります。 p[lang] ― lang属性を持つすべてのp要素を選択します。 p[lang=fr] ― lang属性の値が「fr」に完全一致するすべてのp要素を選択します。 p[lang~=fr] ― lang属性の値に「fr」という単語が含まれるすべてのp要素を選択します(空白区切りの値リストに部分一致)。