This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Selector Description Examples

Selectors can be described in a fairly straight forward way, as long as you work backwards. Here are some examples:

body div.aside ul li

This selects any list item that is a descendant of an unordered list that is a descendant of a division element with a class attribute that contains the word aside that is a descendant of a body element.

div + table

This selects any table that immediately follows (is sibling to) a division.

div > table

This selects any table that is a child of a division.

h1 + *

This selects any element that immediately follows (is sibling to) a heading 1.

div * + p + p

This selects any paragraph that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) any element that is a descendant of a division.

h1 + p#intro + ul > li.move

This selects any list item with a class attribute that contains the word "move" that is a child of an unordered list that immediately follows (is sibling to) a paragraph with an "intro" id that immediately follows (is sibling to) a heading 1.

ul > li ol > li * > a

This selects any 'a' element that is a child of any element that is a descendant of a list item that is a child of an ordered list that is a descendant of a list item that is a child of an unordered list.

body > h1 + p + div > * + p + *

This selects any element that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) any element that is a child of a division that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) a heading 1 that is a child of a body element.

body * > * + h3 + * + table td > div ul > li *

This selects any element that is a descendant of a list item that is a child of an unordered list that is a descendant of a division that is a child of a td that is a descendant of a table that immediately follows (is sibling to) any element that immediately follows (is sibling to) a heading 3 that immediately follows (is sibling to) any element that is a child of any element that is a descendant of a body element.

* + * > * * > * + * *

This selects any element that is a descendant of any element that immediately follows (is sibling to) any element that is a child of any element that is a descendant of any element that is a child of any element that immediately follows (is sibling to) any element.

a.external:visited

This selects any "a" element with a class attribute that contains the word "external" and whose target has been visited.

a:link:hover

Selects any "a" element whose target has not been visited and which is in a hover state.

[href]:focus strong

This selects any "strong" element that is a descendant of any element with a href attribute and which currently has focus.

td.navbar a:first-child:link

This selects any "a" element that is a first child and whose target has not been visited that is a descendant of a "td" element with a class attribute that contains the word "navbar".

div h1:first-child + ul li:first-child

This selects any list item that is a first child that is a descendant of an ul element that immediately follows (is sibling to) a heading 1 that is a first child that is a descendant of a div element.

*:lang(fr):first-letter

This selects the first letter of any element which is in a language or locale whose identifier equals fr or begins with fr-.

h1 + div * > *:first-line

This selects the first displayed line in any element that is a child of any element that is a descendant of a division that immediately follows (is sibling to) a heading 1.

h2 + p + div *[src] + p

This selects any paragraph that immediately follows (is sibling to) any element with a src attribute that is a descendant of a division that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) a heading 2.

td[class="negative"] span > em[class]

This selects any "em" with a class attribute that is a child of a span that is a descendant of a "td" element with a class attribute that equals "negative".

table:first-child tr[class="odd subsummary"] td[class~="total"]

Selects any "td" element with a class attribute that contains the word "total" that is a descendant of a "tr" element with a class attribute that equals "odd subsummary" that is a descendant of a table element that is a first child.