Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Matches() selector not working

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?

like image 522
Vandervals Avatar asked Jan 26 '16 15:01

Vandervals


1 Answers

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.

like image 169
TylerH Avatar answered Nov 08 '22 08:11

TylerH