: has vs: matches - Selectors Level 4

Question

Just wondering what is the difference between CSS (selectors 4) pseudo selectors :hasand:matches

The specification http://dev.w3.org/csswg/selectors-4/#overview says:

E: there corresponds (s1, s2)
an element E that corresponds to a set of selectors s1 and / or a composite selector s2
§4.2 Matches - any pseudo-class :: matches ()

E: has (rs1, rs2)
an element E if any of the relative selectors rs1 or rs2, when evaluated with E as elements of the scope, corresponds to the element of §4.4. Relational pseudo-class :: has ()

Answer 1

In a nutshell:

• E:has(rs1, rs2) E, F E. jQuery :has() , .

• E:matches(s1, s2) E, E . :matches() :not(), E, E . ¹ :matches() jQuery .filter().

  E ( , ), (E)(s1), (E)(s2). , div:matches(.foo, .bar) div.foo, div.bar.

div:matches(p) div:has(p):

• div:has(p) div, p. div p, , div p.

• a div p, div:matches(p) -. (, div:not(p) div.)

---

:

div:has(.foo, .bar)
div:matches(.foo, .bar)

:

<div class="foo"></div> <!-- [1] -->
<div class="bar"></div> <!-- [1] -->

<div class="foo bar">   <!-- [2] -->
  <p></p>
</div>

<div>                   <!-- [3] -->
  <p class="foo"></p>
</div>

<div>                   <!-- [3] -->
  <div>                 <!-- [3] -->
    <p class="bar"></p>
  </div>
</div>

<div>                   <!-- [4] -->
  <div class="foo">     <!-- [5] -->
    <p class="bar"></p>
  </div>
</div>

?

• div:matches(.foo, .bar)
div "foo", div "bar", :matches().

• div:matches(.foo, .bar)
div , .

  : , (0, 1, 1), , , , .

• div:has(.foo, .bar)
div ( a p) , :has().

• div:has(.foo, .bar)
div div.foo p.bar, .

  : :has() CSS, . CSS, . .

• div:matches(.foo, .bar) div:has(.foo, .bar)
div :

  • .foo ( "foo" )
  • "bar".

  div:matches(.foo, .bar):has(.foo, .bar), 4, .

:matches() :has() , :has() , . ; - , :has() , - :has(). , , , , >, + ~ - - , .

, :has() -, , +, -: ul:has(+ p) ul, p ( , p).

:matches(), , , AFAIK , ( ). - , Selectors 3 , - . . . , .

---

¹ _{, "" - Selectors 4, :not() , . , .}