This list is styled with axe ►
The demo above illustrates what can be achieved with axe selectors compared to standard css selectors.
All the dynamic presentation in the demo is powered by CSS.
The dynamic presentation is triggered only when you hover over one of two element types:
You will see that when you hover over either of the two lists on the left (styled with conventional CSS selectors), a small number of dynamic effects are triggered.
But when you hover over either of the two lists on the right (styled with axe selectors), many more dynamic effects are triggered.
The way conventional CSS works, hovering over any element, will normally only allow for a change in the presentation of:
This sphere of influence is - by any definition - limited. But, generally, we don't question it. It's simply the way CSS works..
So... what if CSS had an equivalent set of opposite selectors which could select:
... and so on?
This is what axe selectors enable.
There are seven axe selectors.
Four of the axe selectors are counterparts to selectors which exist in conventional CSS:
+will select the immediate next sibling | The axe selector
?will select the immediate previous sibling.
~will select any subsequent sibling | The axe selector
!will select any previous sibling.
>will select the immediate child | The axe selector
<will select the immediate parent.
[space]will select any descendant | The axe selector
^will select any ancestor.
There are three more axe selectors which have no counterpart in conventional CSS but which have utility equal to those of standard CSS selectors:
%will select both immediately adjacent siblings.
|will select all siblings.
\will select any other element in the document, regardless of relationship.