CSSのセレクタ指定には、親要素と子要素を組み合わせて繋ぐことができる結合子を付けたセレクタの指定ができます。
CSSのセレクタを指定するとき使用する、クラスセレクタやidセレクタにも結合子を使用することで、入れ子になった親要素と子要素を結合してセレクタにできます。
CSSの結合子の書き方は覚えておくと必ず役に立つので今回の投稿が参考になればと思います。
CSSの結合子とは？
CSSの結合子とは、HTMLでマークアップして入れ子になった親要素と子要素の関係性を、CSSのセレクタを2つ指定したときに、2つのセレクタを繋ぐ役割をする部分のことです。
セレクタを繋ぐ連結部分のパーツと考えてもいいかもしれません。
CSSでセレクタとセレクタを繋ぐ連結部分を、結合子を指定することで親要素に入れ子になった子要素に適用するCSSの適用範囲をコントロールすることができます。
CSSの結合子には、○○結合子のように、いくつかの種類があります。
- 子孫結合子
- 子結合子
- 隣接結合子
- 間接結合子
このCSSの結合子の種類の一つ一つは、CSSのセレクタを結合するために使う記号を用いてセレクタとセレクタを結合します。
どんな記号でセレクタを結合すればいいのか？CSSの結合子でセレクタを連結して指定したスタイルが適用できる範囲なども含めて書き方を見ていこうと思います。
CSSの結合子でセレクタを入れ子にする
CSSの結合子でセレクタを連結するには、どれも記号をセレクタとセレクタの間に記述します。
- 「子孫結合子」 半角スペース
- 「子結合子」 >
- 「隣接結合子」 +
- 「間接結合子」 ~
HTMLでマークアップした構造が入れ子になっていても、CSSのセレクタで親要素と子要素を記号で結合して組み合わせれば、「隣接セレクタ」「間接セレクタ」「子孫セレクタ」にする書き方ができます。
CSSの結合子の書き方を一つずつ説明します。
子孫結合子でセレクタにする
CSSの「子孫結合子」でセレクタを連結する場合の書き方は、半角スペースを結合子として、セレクタを「A B」という書き方で記述します。
これによりA要素内の全てのB要素にスタイルシートが適用できます。
<div class="ketugou"><!--ここがA-->
<h2>結合子</h2><!--ここがB-->
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>.ketugou h2{
border-bottom: 3px solid #aab1ff;
}
上記のHTMLとCSSでdivの親要素のクラス名(.ketugou)と、h2タグをCSSの子孫結合子で連結したセレクタの書き方の場合、クラス名の.ketugouとh2の間に半角スペースを作りセレクタの連結ができます。
子孫セレクタで連結したセレクタに適用したCSSは上の画像のように、結合子で親要素との関係を繋ぐことができているh2に対してのスタイルを適用できます。画像ではh2に3pxのborder-bottomを適用。
また、子孫結合子という名前の通り、子だけではなく孫要素に結合子を繋いでスタイルを適用することもできます。
CSSのセレクタを.ketugou liと書き方を変えれば、親要素との関係を繋ぐことができている、liに対してのスタイルを適用できます。
子結合子をセレクタにする
CSSの「子結合子」でセレクタを連結する場合の書き方は、記号の>を結合子としてセレクタを「A>B」という形で記述すると、A要素の1階層下のB要素のみにスタイルシートを適用できます。
<div class="ketugou"> <!--ここがA-->
<h2>結合子</h2>
<ul> <!--ここがB-->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>.ketugou>ul {
background-color: #fbfb74;
padding: 10px;
}
子結合子の記述を上記のHTMLとCSSを例にした場合、親要素のクラスセレクタ(.ketugou)とulのセレクタの間に>を記述する書き方をします。セレクタ同士が入れ子構造のHTMLでも連結できます。
これにより、2つ目のセレクターのulが、1つ目のセレクターで指定した.ketugouの子要素の場合にのみ適用するスタイルを指定することができます。画像ではul要素のpaddingと背景色を子結合子で適用してます。
CSSの子結合子の場合は、2階層下の同じ要素には適用されません。A要素の1階層下のB要素のみに適用できるのが子結合子です。
隣接結合子の書き方
CSSの「隣接結合子」でセレクタを連結する場合の書き方は、記号の+を結合子としてセレクタを「A+B」という形で記述します。
隣接結合子はA要素の直後に記述したB要素のみにスタイルシートを適用することができます。
<div class="ketugou">
<h2>結合子</h2><!--ここがA-->
<ul><!--ここがB-->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>h2+ul {
list-style: none;
}
たとえば、h2の直後に記述したul要素のみにCSSを適用する場合の書き方を例にします。
h2とulのセレクタの間で結合子の+を記述して、h2とその直後に位置するul要素を結合します。
表示を確認してみると、h2の直後にあるulリストの初期値で表示される黒ポチだけが、list-style: none;の指定で消すことができています。
隣接結合子はA要素の直後に記述したB要素のみにCSSを適用なので、h2がない下のulのリストにはlist-style:noneが適用されないです。
もし、2個目のulの上にh2をマークアップするとh2の直後に記述したul要素にすることができるのでlist-style:noneが適用できます。
間接結合子の書き方
CSSの「間接結合子」でセレクタを連結する場合の書き方は、記号のチルダ~を結合子としてセレクタを「A~B」という形で記述します。
隣接結合子は、A要素の後に記述した全てのB要素にスタイルシートを適用することができます。
<div class="ketugou">
<h2>結合子</h2><!--ここがA-->
<ul><!--ここがB-->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul><!--ここがB-->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>h2~ul {
border-bottom: 3px solid #aab1ff;
}
上記のCSSではh2をAとし、ulをBとしてスタイルを適用しているので、h2の後に記述した全てのulに3pxのborder-bottomが適用されます。
隣接結合子で適用先にできるのは、Aと同じ階層のBのみです。たとえば親要素の.ketugouと、ulを間接セレクタで連結セレクタにしても、同じ階層ではないのでスタイルは適用されないです。
ということは、隣接セレクタの説明で適用したlist-style:noneの適用は、A要素の後に記述した全てのB要素にスタイルシートを適用することができる間接セレクタで適用するようにすれば、全てのリストの黒ポチを消すことができるとうことになります。
カンマでセレクタをグループ化
CSSの結合子の書き方を説明していますが、少し結合子に似たセレクタの連結する書き方です。
CSSの子孫結合子で、親要素のクラスと子要素を半角スペースで区切って繋ぎ、連結します。
.ketugou h2, ul, li {
text-align: center;
}
連結したBのセレクタの子要素のセレクタ達は、カンマで区切ることで指定要素にまとめてスタイルを適用する書き方ができます。
指定したい要素をセレクタでまとめてグループ化することができる書き方なのでけっこう使うことの多いセレクタの書き方です。
指定したCSSのセレクタはグループ化して記述していますが、検証ツールで、それぞれの要素を表示して見ることで、セレクタごとにハイライトされて確認できます。
まとめ
CSSの結合子でセレクタを入れ子にする書き方のまとめとして、「結合子の名前」「書き方に使用する記号」「結合子で適用できる範囲」を書いておきます。
子孫結合子「A B」
A要素内の全てのB要素に適用
子結合子「A>B」
A要素の1階層下のB要素のみに適用
隣接結合子「A+B」
A要素の直後に記述したB要素のみに適用
間接結合子「A~B」
A要素の後に記述した全てのB要素に適用
