:has Relational Pseudo-ClassEdit online
:has Relational Pseudo-ClassOxygen XML Editor plugin supports the CSS Level 4 subject selector (currently a working draft
at W3C http://www.w3.org/TR/selectors4/), as
described in Subject Selector. Oxygen XML Editor plugin also supports the :has relational pseudo-class that has similar
functionality and it can match an element by taking its child elements into account. For more
information, see https://drafts.csswg.org/selectors-4/#relational.
You can create conditions that take into account the structure of the matching element.
table:has( tbody > thead){
border: 1px solid red;
}This example will result in a border being drawn for the table elements that contain at least
a thead element in the tbody element.
Taking Processing Instructions into Account in CSS Subject Selectors
You can test for the existence of specific processing instructions (PI) in
the child hierarchy of a subject selector.
@namespace oxy "http://www.oxygenxml.com/extensions/author"; chapter! > oxy|processing-instruction[important][level="high"]{ color:red; }
important processing
instruction:<chapter>
<title>A title</title>
<?important level='high'?>
</chapter>Descendant Selectors Limitation
a:has(b c)and:
a:has(b>c)