This list is styled with axe   ►

Rainbow List

Priority List

axe Rainbow List

axe Priority List


Explanation of what is going on in the axe demo above

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:

  1. one of the lists; or
  2. an individual list item

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.


How can hovering over the two lists on the right exert so much more presentational influence across the page?

The way conventional CSS works, hovering over any element, will normally only allow for a change in the presentation of:

  1. the element itself;
  2. any descendant of the element;
  3. any subsequent sibling of the element; or
  4. any descendant of any subsequent sibling of the element

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:

  1. any ancestor of the element;
  2. any previous sibling of the element; or
  3. any ancestor of any previous sibling of the element

... and so on?

This is what axe selectors enable.


Introduction to the Seven axe Selectors

There are seven axe selectors.

Four of the axe selectors are counterparts to selectors which exist in conventional CSS:

  1. In CSS, + will select the immediate next sibling | The axe selector ? will select the immediate previous sibling.
  2. In CSS, ~ will select any subsequent sibling | The axe selector ! will select any previous sibling.
  3. In CSS, > will select the immediate child | The axe selector < will select the immediate parent.
  4. In CSS, [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:

  1. The axe selector % will select both immediately adjacent siblings.
  2. The axe selector | will select all siblings.
  3. The axe selector \ will select any other element in the document, regardless of relationship.