スポンサーサイト

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS 第四水準(CSS4)での"上位セレクタ", "親セレクタ"や"直前セレクタ"

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
  • 本記事は、旧アメブロ出張所に平成26年12月11日に投稿した記事を改稿したものです。

CSS 第二水準第一改訂版(CSS 2.1)には

などが定義されております。


親セレクタや直前セレクタはないの?

それでは、これらとは正反対のセレクタ、すなわち、

親セレクタ
指定された要素を子要素とする要素へのセレクタ
上位(親・先祖)セレクタ
指定された要素が下位要素となっている要素へのセレクタ
直前セレクタ
指定された要素の直前の要素、言換えれば指定された要素が直後にある要素のセレクタ

があればいいのにと思われた方も少なくないでしょう。

残念ながら、CSS 第三水準(CSS3)まででは、これらのようなセレクタは定義されておりません

しかし、CSS 第四水準(CSS4)に含まれるセレクタ第四水準では、これらのセレクタを実現する方法が策定されております。


セレクタ第四水準で定義される予定の :has() 擬似クラス

セレクタ第四水準では、新たな擬似クラスとして :has() 擬似クラスが定義される予定です。

:has() 擬似クラスは、カッコ内にて示されたセレクタで選択される要素を含んでいる要素に対して適用される事を示す擬似クラスです。

:has() 擬似クラスが実装されれば、更に複雑な条件を明記出来るようになりますが、以下、記事表題で示されるような単純なセレクタの表記方法を解説致します。


上位セレクタ

今、

  • A と言うセレクタで示される要素のうち、B と言うセレクタで示される要素の上位にあるもののみを対象としたセレクタ

言換えると、

  • A と言うセレクタで示される要素に対し、下位に B と言うセレクタで示される要素が含まれているもののみを対象としたセレクタ

は、

  • A:has( B)

で記述されます。

このセレクタは、A セレクタで示される要素であっても、下位に B セレクタで示される要素が存在しない要素は対象外となります。


親セレクタ

今、

  • A と言うセレクタで示される要素のうち、B と言うセレクタで示される要素の親要素となっているもののみを対象としたセレクタ

言換えると、

  • A と言うセレクタで示される要素に対し、直下に B と言うセレクタで示される要素が含まれているもののみを対象としたセレクタ

は、

  • A:has(>B)

で記述されます。

つまり、:has() 擬似クラスの引数として、B セレクタの直線に直下(子)セレクタを示す > を付ける事で、直下セレクタで示される要素が含まれる要素のみが対象となります。


直前セレクタ

今、

  • A と言うセレクタで示される要素のうち、B と言うセレクタで示される要素の直前にあるもののみを対象としたセレクタ

言換えると、

  • A と言うセレクタで示される要素に対し、直後に B と言うセレクタで示される要素があるもののみを対象としたセレクタ

は、

  • A:has(+B)

で記述されます。

つまり、:has() 擬似クラスの引数として、B セレクタの直線に直後(隣接)セレクタを示す + を付ける事で、直後セレクタで示される要素が含まれる要素のみが対象となります。

関連記事
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。