:where()

åºçº¿ å¹¿æ³å¯ç¨

css

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:where() å :is() çä¸åä¹å¤å¨äºï¼:where() çä¼åçº§æ»æ¯ä¸º 0ï¼ä½æ¯ :is() çä¼åçº§æ¯ç±å®çéæ©å¨åè¡¨ä¸ä¼åçº§æé«çéæ©å¨å³å®çã

è¯æ³

css

:where(<complex-selector-list>) {
  /* ... */
}

å¯å®¹ééæ©å¨è§£æ

è§èå° :is() å :where() å®ä¹ä¸ºæ¥åä¸ä¸ªå¯å®¹ééæ©å¨åè¡¨ã

css

:is(:valid, :unsupported) {
  /* â¦ */
}

css

:valid,
:unsupported {
  /* â¦ */
}

ç¤ºä¾

æ¯è¾ :where() å :is()

è¯¥ç¤ºä¾å±ç¤ºäº :where() æ¯å¦ä½èµ·ä½ç¨çï¼å¹¶ä¸ä¹éè¿°äº :where() å :is() çåºå«ã

è·éä»¥ä¸ HTMLï¼

html

<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="/proxy/mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="/proxy/developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="/proxy/github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="/proxy/mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="/proxy/developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="/proxy/github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

css

html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

css