ホームページ構築に使える便利な「結合子」4つ

結合子はとても便利

ある要素の子要素を指定する事ができる「結合子」
ホームページを構築する時にかなりの頻度で使う場面がでてきます。
覚えておくとHTMLへのclass・idの指定を減らす事ができ、CSSの記述もシンプルにできるのでとても便利です。
またHTMLが自動で生成されるような仕組みを使っていて、独自にclass・idの指定を個別につけられなくても、結合子を活用すれば対処できる場面もあるので覚えておくようにしましょう。

そもそも結合子とは何なのか？何ができるのか？

結合子は「ある要素の子要素」を指定する事ができます。
例えば・・・

このようなHTMLがあった時、h2要素とp要素を両方とも太字にしたい場合、それぞれにCSSを書いてあげないといけませんよね？
でも結合子を活用した書き方であれば、1つの指定で足りるんです！！

またdl要素でHTMLを作成して、2個めのdtの上にmarginを付けたい場合・・・よくありませんか？

一番上だけmarginの無いCSSを書いてはいませんか？
こんな部分も簡単に指定することができます。

結合子の紹介4つ

それでは具体的にどうやって使うのかをみていきましょう。

選択範囲「A B」

Aの中にあるBを指定する方法です。
例えば

とすれば、A（div要素）の中にあるB（span要素）を指定して装飾を付ける事ができます。
要素を指定していますが、もちろんclassやidも使う事ができますよ。

選択範囲「A > B」

Aの子要素となるBだけを指定する方法です。

A（div要素）の子要素B（span要素）を指定して装飾を付ける事ができます。
3行目のspan要素はdiv要素の孫要素なのでCSSが効きません。

選択範囲「A + B」

Aの直後にあるBを指定する方法です。

A（dd要素）の直後に現れるB（dt要素）を指定する事ができます。
この書き方でddとdtの間にmarginを設けたりすることができるので、とても便利な指定です。

選択範囲「A ~ B」

Aで指定した要素と共通の親要素を持つA以降のBを指定する方法です。

A（h1要素）以降のB（p要素）を指定する事ができます。
6行目はA（h1要素）以降に現れるB（p要素）ですが、親要素がdiv要素になっているので、A（h1要素）と親要素が異なります。なのでCSSが効きません。

便利だけれど利用には注意

とても便利な「結合子」でも、考え無しにどこでもなんでも使えばいいというものでもありません。
例えば大きな範囲を指定する結合子を設定したとき、思いがけない部分にも影響してしまうかもしれません。
本当にその要素は、今使いたい部分にしか出てこない！と確信があれば指定しても大丈夫かもしれませんが、管理者が変わったら？ページ追加や更新時は？など今後の展開についても考えて設計するように決める様にしてください。
本当に必要な範囲にだけ設定するようにしておかなければ、後からCSSを書く量が増えていったり、管理が大変になる事にもなりかねません。
また今回説明したA・BにはHTMLタグを指定していますが、classやidの指定ももちろん使えます。ぜひ活用してみてください。

まとめ

・選択範囲「A B」
・選択範囲「A > B」
・選択範囲「A + B」
・選択範囲「A ~ B」
・活用する事でCSSやHTMLの記述がシンプルになる
・大きな範囲を指定する場合には、他のページや項目に悪い影響がないか、一度止まって考える