How to have multiple values inside a CSS tilde attribute selector?-CodePudding

I'm trying to select a list elements by using a tilde attribute selector with multiple values.

If I put only one value like this, it works fine:

a[class~="logo1"] {
    background: gold;
}

But, if I put it like this (my goal is to have multiple values), it doesn't work:

a[class~="logo1 logo2"] {
    background: gold;
}

On the MDN page I read a value can be a whitespace-separated list of words. But I'm probably making a syntax error, since it doesn't work.

Codepen: https://codepen.io/kodplay/pen/GRQEeOE?editors=1100

Thank you!

CodePudding user response：

You can write multiple selectors combining with ','

a[class~="logo1"],a[class~="logo2"] {
    background: gold;
}

CodePudding user response：

Is the new selector :is

a:is(.logo1, .logo2) {
  background: gold;
}

<ul>
  <li><a href="#internal" id="internal">Internal link</a></li>
  <li><a href="http://example.com" >Logo 1</a></li>
  <li><a href="#InSensitive" >Logo 2</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
  <li><a href="https://temp.org">Example exact match</a></li>
</ul>