Selector examples
Selectors that do not depend on use of mouse
Example 1
Paragraph one — style elements 1 and 4.
Example 2
Paragraph two — style elements 2 and 4.
Example 3
Third paragraph terminates with red words
these words are red
— style elements 1, 3 and 4.
Example 4
Paragraph four followed by a list with each element containing
a sublist, where the second sublist is within a div element.
— style elements 2 and 4 in the text, and style element 5 in the
first list element.
Example 5
This is a P element immediately after a DIV element. —
style elements 1, 4 and 7
- UL element 1 follows a DIV element. — style element 8
Article heading
- UL element 2 is unstyled because it is within an ARTICLE element that
follows the UL element with
a yellow background.
This is the last line of the article
- UL element 3 follows the ARTICLE element and is at the same level as
a preceeding DIV element — style element 8
Example 6
This is the first line of DIV element that contains a pair of nested UL elements.
- LI element one deep within UL elements.
- LI element two deep within UL elements. HOVER OVER ME
— style elements 5, 8, 10 and 11
Selectors that depend on use of the mouse
Mouse over the links to see them change style
Drag mouse over all the text, Or, use select all from the edit menu.
— style element 6
This link changes color when
hovered over.
Press and hold button
down on the link to see its active style compared to the default active
style for the other links. — style elements 12 and 13
This link changes font-size.
— style element 14
This link changes background-color
— style element 15
This link changes font-family
— style element 16
This link changes text-decoration when
hovered over
to underline — style elements 17 and 18