◆ 最新の Selector モジュールの Editor's Draft だと Subject セレクタ (!) がなくなってる
◆ 代わりに :has ができてる
◆ より便利になった 

css セレクタで親要素に戻りたい の記事が思いの外アクセス数が多いので新しい情報書いておきます


今の selectors モジュールの level4 の Latest は 2013 年のものです
https://www.w3.org/TR/selectors4/
http://www.w3.org/TR/2013/WD-selectors4-20130502/
↑今のところ一緒のリンク先ですが将来的に上側が変わるので固定リンクです

このバージョンでは Subject セレクタが存在します
E! > F         an E element parent of an F element
      Determining the subject of a selector + Child combinator         4


最新のエディターズドラフトは 2016 年 9 月 14 日に最終更新でつい最近です
https://drafts.csswg.org/selectors-4/

どのタイミングで変わったのかまで把握していませんが 「!」 を使う Subject セレクタはなくなっています

代わりに :has() を使うことになっています
jQuery みたいな感じかな


サンプルをコピペしてくると
For example, the following selector matches only <a> elements that contain an <img> child:

a:has(> img)

The following selector matches a <dt> element immediately followed by another <dt> element:

dt:has(+ dt)

The following selector matches <section> elements that don’t contain any heading elements:

section:not(:has(h1, h2, h3, h4, h5, h6))

Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:

section:has(:not(h1, h2, h3, h4, h5, h6))

...would result matching any <section> element which contains anything that’s not a header element.


a:has(>img)
<a><img></a>
こういう img タグを子要素にもつ a タグにマッチということになっています

これだと前にできないと言ったこれ(↓)もできます
div
├ul#tab-head
│ ├li
│ │ └input#x[type=radio]
│ └li
│  └input#y[type=radio]

└div#tab-content
  ├div.x
  └div.y

少しだけ構造が変わってますが input#x のラジオボタンがチェックされているときに div.x のように対応するものだけを表示させます
/* デフォルトは全部非表示 */
div#tab-content>div {
    display: none;
}

/* チェック中のものを表示 */

div:has(#x:checked)>#tab-content>.x,
div:has(#y:checked)>#tab-content>.y {
    display: block;
}

こっちのほうが書きやすいですし できることの幅も広くなったのでよかったです

といっても まだこれも確定というわけじゃないので まだ変わるかも