セレクターを組み合わせて自由に指定する方法(結合子)

2020年12月18日CSS

CSSには、複数の組み合わせ方法があり、それらを使いこなすことで、より短く記述したり、自由に装飾することができます。 その組み合わせの際に使う記号のことを、結合子といいます。 どんな組み合わせ方法があるのか、どの結合子を使うのか把握しておきましょう。

結合子を使ってセレクターを組み合わせる

係合方法結合子意味具体例
a, b, (コンマ)aとbp, div
ab結合子なし(スペースもなし)bが付与されたah2.info
a > b>(大なり)aの直下の階層にあるbh2 > div
a b

半角空白

aの下の階層にあるbh2 div
a + b+(プラス)aの直後にあるbdiv + div

カンマ区切りで組み合わせる方法

カンマ区切りは下のようにたとえば pタグとdivタグだけに適用されます。 何個でも指定できます。  

並べてくっつける方法(結合子なし)

h2とinfoクラスなら、h2.infoとします。 h2のinfoクラスがついたものが指定されます。 h2とinfoのidなら、h2#infoとします。 h2のinfoのidがついたものが指定されます。 h2とinfoのidのtxtクラスなら、h2#info.txtとします。 h2のinfoのidがついたtxtクラスのものが指定されます。 注意点としては、h2h3のように要素同士をくっつけることはできません。 また、スペースを入れると意味が変わってしまうので注意しましょう。  

>(大なり)でくっつける方法

これは、h2の直下のdivタグを指定していることになります。 親要素>直下の子要素のみ指定する方法です。 下の半角空白でくっつける方法と間違わないように違いを知っておきましょう。  

半角空白でくっつける方法

これだとh2の中のどのdivの要素にスタイルを適用できます。 親要素の中の指定した子要素すべてということになります。

+(プラス)でくっつける方法

左側に指定したものの直後にある右側のものにスタイルを適用するという意味です。 p + pなら、最初のpのあとのpとなります。 border-topなどで間にだけボーダーを入れたい場合などに使います。

CSS

Posted by devsakaso