I'm testing this and it is supposed to be working (http://caniuse.com/#search=matches) on Chrome 47:
.results h4 {
color: red
}
.results :matches(h4) {
color: blue;
}
:matches(h2, h4) {
font-size: 2em;
}
<div class="results">
<h4>Hello</h4>
</div>
<h2>Hi</h2>
Hello should be blue and big, but it is red! Why?
The feature you linked to is a DOM feature accessible via JavaScript, not CSS. The CSS pseudo-selector you are looking for is still behind a prefix and is called :any
currently:
JSFiddle
:-moz-any(section, article, aside) h1 {
color: red;
}
:-webkit-any(section, article, aside) h1 {
color: red;
}
<section>
<h1>Section: Hello World!</h1>
<p>But I must explain to you how...</p>
</section>
:matches()
exists, but only as a future proposal, except apparently Safari 9, but I don't have access to an OSX install right now to test that.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With