oXygen supports the CSS Level 2 and Level 3 selectors. For the full list of supported selectors see the oXygen documentation.

In the sections below you can find examples for each of the CSS Level 3 structural pseudoclasses, except for the :root (http://www.w3.org/TR/css3-selectors/). To see the CSS rules used by the samples, open: selectors-and-structural-pseudo-classes.css

:first-child

A nested list of DIV-s, the first child painted differently.

1.1
1.2
1.3
2
3.1
3.2
3.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

:last-child

A nested list of DIV-s, the last child painted differently.

1.1
1.2
1.3
2
3.1
3.2
3.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

:nth-child

A nested list of DIV-s, the 3n+2 child painted differently.

1.1
1.2
1.3
1.4
1.5
1.6
1.7
2
3.1
3.2
3.3
4.1
4.2
4.3
4.4

Sed turpis enim, posuere sit amet augue at, ultricies rutrum est.

Aenean facilisis ultrices elit, vel blandit lectus posuere placerat.

Aenean vitae libero sagittis, molestie ante quis, mattis libero.

Integer faucibus orci id sagittis gravida.

Cras aliquam, nisi placerat rutrum facilisis, risus quam adipiscing arcu, eget faucibus libero risus ut felis.

In bibendum enim vitae velit pellentesque ullamcorper.

Aenean egestas vulputate porta.

Nulla ut sem non neque eleifend rhoncus.

Vivamus vel venenatis orci. Nam vel orci nisi.

:nth-last-child

A nested list of DIV-s, the second child counted from the last one, painted differently.

1.1
1.2
1.3
1.4
1.5
1.6
1.7
2
3.1
3.2
3.3
4.1
4.2
4.3
4.4

Sed turpis enim, posuere sit amet augue at, ultricies rutrum est.

Aenean facilisis ultrices elit, vel blandit lectus posuere placerat.

Aenean vitae libero sagittis, molestie ante quis, mattis libero.

Integer faucibus orci id sagittis gravida.

Cras aliquam, nisi placerat rutrum facilisis, risus quam adipiscing arcu, eget faucibus libero risus ut felis.

In bibendum enim vitae velit pellentesque ullamcorper.

Aenean egestas vulputate porta.

Nulla ut sem non neque eleifend rhoncus.

Vivamus vel venenatis orci. Nam vel orci nisi.

:nth-of-type

A list of DIV-s and P-s, the third DIV and P painted differently.

DIV 1
DIV 2

P 1

Text between elements (does not affect the element position)
DIV 3
DIV 4

P 2

P 3

P 4

DIV 5
DIV 6
Loreipsumdolorsit
amentconsecteturadipiscingelit
aeneantinciduntmetusjusto
Sedturpisenimposere
sitametaugueat
ulticiesrurtumestaenean
facilisisultirceeltvel
blanditlectusposereplacerant

:nth-last-of-type

A list of DIV-s and P-s, the second one, counted from the last one, painted differently.

DIV 1
DIV 2

P 1

DIV 3
DIV 4

P 2

P 3

P 4

DIV 5
DIV 6
Lore ipsum dolor sit
ament consectetur adipiscing elit
aenean tincidunt metus justo
Sed turpis enim posere
sit amet augue at
ulticies rurtum est aenean
facilisis ultirce elt vel
blandit lectus posere placerant

:empty :not(:empty)

A list of nested DIV-s, annotated.

das
4

Sed turpis enim, posuere sit amet augue at, ultricies rutrum est. Aenean facilisis ultrices elit, vel blandit lectus posuere placerat.

Aenean vitae libero sagittis, molestie ante quis, mattis libero. Integer faucibus orci id sagittis gravida.

Cras aliquam, nisi placerat rutrum facilisis, risus quam adipiscing arcu, eget faucibus libero risus ut felis.

Aenean egestas vulputate porta. Nulla ut sem non neque eleifend rhoncus.

Vivamus vel venenatis orci. Nam vel orci nisi.

:only-child

A list of nested DIV-s, the ones being the only sibling are painted differently.

1
2
3
4

Sed turpis enim

Sed turpis enim, posuere sit amet augue at, ultricies rutrum est. Aenean facilisis ultrices elit, vel blandit lectus posuere placerat.

Cras aliquam

Aenean egestas.

Aenean egestas porta. Nulla ut sem non neque eleifend rhoncus.

Vivamus.

Vivamus vel venenatis orci. Nam vel orci nisi.

:only-of-type

A list of nested DIV-s, and Ps the ones being the only sibling of their type are painted differently.

1
DIV 2

P 1

3
4

P 2

Sed turpis enim

Sed turpis enim, posuere sit amet augue at, ultricies rutrum est. Aenean facilisis ultrices elit, vel blandit lectus posuere placerat.

Cras aliquam

Aenean egestas.

Aenean egestas porta. Nulla ut sem non neque eleifend rhoncus.

Vivamus.

Vivamus vel venenatis orci. Nam vel orci nisi.

Following sibling: E ~ F

An F element preceded by an E element. A P preceded by a DIV is shown in red.

P 1

DIV 1

P 2

P 3

DIV 3
DIV 4

P 4

P 5

Sed turpis enim, posuere sit amet augue at, ultricies rutrum est. Aenean facilisis ultrices elit, vel blandit lectus posuere placerat.

Sed turpis enim

Aenean egestas.

Aenean egestas porta. Nulla ut sem non neque eleifend rhoncus.

Vivamus vel venenatis orci. Nam vel orci nisi.

Vivamus.