HTML and CSS Reference
In-Depth Information
Selector
Description
Example
Defined In
:nth-last-
child(n)
Selects the element
that is the nth-from-last
child of its parent
p:nth-last-child(3) {color:
yellow;}
/* sets the color to yellow if
the p element is its parent's
3rd to last child */
CSS3
:nth-of-type(n)
Selects the element
that is the nth child of
its parent that is its
type
strong:nth-of-type(5)
{text-decoration: underline;}
/* underlines the fifth strong
tag under a parent */
CSS3
:nth-last-of-
type(n)
Selects the element
that is the nth-from-last
child of its parent that
is its type
p:nth-last-of-type(2) {color:
purple;}
/* sets the color to purple on
the second to last p element
of its parent */
CSS3
:root
Selects the element
that is the root of the
document
:root {background-color:
blue;}
/* sets the background color
to blue for the root element
*/
CSS3
Selects an element that
has no children
CSS3
:empty
div:empty {display: none;}
/* hides the div if it has no
children */
Selects elements
that do not match the
selector s
CSS3
:not(s)
*:not(h1) {color: black;}
/* sets the color to black on
every element that is not an
h1 tag */
:lang(value)
Selects all elements
that have the
lang
attribute set to the
given value
*:lang(fr) {color: blue;}
/* sets the font color to blue
for every element that has the
attribute lang set to 'fr' */
CSS2
T
ABLE
4-9 CSS Pseudo-Class Selectors (continued)
CSS Properties Preview
Now that you've seen
how
elements are selected by rules in style sheets, you probably are
wondering what
are
the various properties that can be set. There are lots of things to choose
from; in fact, there are dozens of CSS1 and CSS2 properties. Roughly, we can break properties
into several groups, including font, background, positioning, borders, and more. Table 4-10
details the groups with a sampling of the various properties under each. We will cover each
of these properties in Chapter 5.
