H.Y.Works

:is() で列挙したセレクターは、:is() を記述した場所に機械的に置き換えられるわけではなく、「そのセレクターにマッチする要素」というクラスに変換された上で置き換えられる。

• たとえば、次の記述は、 #ROOT > :is(DIV > SPAN, SPAN > DIV){ color:red; } 以下のように解釈されることを期待している。 #ROOT > DIV > SPAN,
#ROOT > SPAN > DIV{ color:red; }
• 実際には、このルールを次のHTMLに適用すると、 <DIV id="ROOT">
  <DIV>
    <DIV>#ROOT &gt; DIV &gt; DIV</DIV>
  </DIV>
  <DIV>
    <SPAN>#ROOT &gt; DIV &gt; SPAN</SPAN>
  </DIV>
  <SPAN>
    <DIV>#ROOT &gt; SPAN &gt; DIV</DIV>
  </SPAN>
  <SPAN>
    <SPAN>#ROOT &gt; SPAN &gt; SPAN</SPAN>
  </SPAN>
</DIV> 期待に反し、以下のようになる。
  #ROOT > DIV > DIV

  #ROOT > DIV > SPAN

  #ROOT > SPAN > DIV

  #ROOT > SPAN > SPAN
• これは、先の記述内にある :is(DIV > SPAN, SPAN > DIV) が、まず「 DIV の子である SPAN 、または SPAN の子である DIV 」を指すクラスに置き換えられ、しかるのちに「 #ROOT の子のうち、そのクラスに合致する要素」と解釈されるためだ。
  この例で言えば、#ROOT が DIV であるために、その子である SPAN にのみ color:red が適用される。
  
• 通常は不便に感じるこの挙動だが、おそらくCSSにおいて唯一の、指定した位置より上位の要素への参照能力を持つため、うまく使えば強力な（見方によっては危険な）マークアップが可能になると思われる。