IT業界の技術をメモ・情報公開できる

CSSの階層指定

登録日:2024-06-20   
css
子と孫を指定する(空白区切り)
「セレクタ1 セレクタ2」
・セレクタを空白区切りで並べた場合、子孫セレクタになります。
・セレクタ1を親として、子と孫のセレクタ2の要素が対象になります。

子を指定する(>)
「セレクタ1 > セレクタ2」
・セレクタを>で区切って並べた場合、子セレクタになります。
・セレクタ1を親として、子のセレクタ2の要素が対象になります。

兄弟で弟を指定する(+)
「セレクタ1 + セレクタ2」
・セレクタを+で区切って並べた場合、隣接セレクタになります。
・セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素が対象になります。

兄弟で弟を指定する(離れていても可能)(~)
「セレクタ1 ~ セレクタ2」
・セレクタを~で区切って並べた場合、一般兄弟セレクタになります。
・セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。
・セレクタ1とセレクタ2の間に別の要素があっても影響しません。(隣接セレクタとの違い)

一覧に戻る