QR code for this page

Powered by Titania Delivery

:has Relational Pseudo-Class

Oxygen 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.

For example:

@namespace oxy "http://www.oxygenxml.com/extensions/author";

chapter! > oxy|processing-instruction[important][level="high"]{
  color:red;
}

This would change the color of a DocBook chapter to red if it contains the important processing instruction:

<chapter>
   <title>A title</title>
   <?important level='high'?>
</chapter>

Descendant Selectors Limitation

Important

The current implementation has a known limitation. The general descendant selectors are taken into account as direct child selectors. For example, the following two CSS selectors are considered equivalent:
a! b c
and:
a! > b > c
Parent topic: Supported CSS Selectors

Was this helpful?