The elements styled by the basic
selectors from lesson 3 can be
identified independently of their position within the element tree. The
elements styled by what we will call the advanced
selectors, by
contrast, can only be identified by their specific relationships to other
elements in the element tree.
Decendant Selectors
Decendant selectors are written as a sequence of space separated elements along
the path from the root (html) to the styled element. It is not
necessary or usual to list all elements in the path. Matching happens whenever
each element specified occurs in the correct order within the path.
ol a {
font-size: x-large;
}
The style above makes hyperlink (a) elements that are decendents
of ordered lists (<ol></ol>) have an extra large font
size.
li li li {
list-style-type: lower-roman;
}
This style sets doubly nested list elements to lower-roman style.
Child Selectors
Child selectors are written as parent-child combination of elements seperated
by a > symbol.
section > h2 {
color: #F70;
}
This style makes h2 elements that are children of
section elements orange.
They can be chained together to select very specific sections of the element tree.
section > p > sup {
color: #F00;
}
This style makes sup elements that are children of p
elements that are children of section elements red.
Adjacent Sibling Selectors
Adjacent sibling selector selects an element that immediately follows another
element (its adjacent sibling). The two elements are separated by
a + symbol when writing the style.
The easiest way to demonstrate how sibling selectors work is to show you an
example. Download this
file to your computer. Open the file with a text editor, and notice that the
body contains one top level heading (h1) followed
by three second level headings (h2).
Add the following style to this document:
h1 + h2 {
color: red;
}
And the document will look like this:
Change the style to:
h2 + h2 {
color: red;
}
And the document changes to this:
Study this example until you understand why it works the way that it does.
Pseudo-classes and Pseudo-elements
Pseudo-classes
Pseudo-classes behave like classes in html, but instead of being written explicitly using element attributes, they select elements implicitly by their relationship to other elements.
We have already seen the pseudo-classes for the hyperlink element in
lesson 3. CSS 1 provides an
additional pseudo-class that is very useful, the :first-child
pseudo-class. The following style:
p:first-child {
color: red;
}
will color the text in a paragraph that is the first child of its parent element red. You will explore how this works in more depth in the exercises.
CSS 3 introduces several new pseudo-classes, including:
| Psuedo-class | Example(s) or Description |
|---|---|
| :last-child | li:last-child |
| :nth-child( { number expression | odd | even ) | tr:nth-child(2n+1) or tr:nth-child(even) |
| :nth-last-child( { number expression | odd | even ) | Works like :nth-child, only it counts from last child instead of first. |
| :nth-of-type( { number expression | odd | even ) | p:nth-of-type(3n-1) or section > img:nth-of-type(odd) |
| :nth-last-of-type( { number expression | odd | even ) | Works like :nth-of-type, only it counts from last child instead of first. |
Pseudo-elements
Pseudo-elements are used to style elements which don't actually exist in the HTML markup.
| Pseudo-element | Example / Description |
|---|---|
| ::first-letter | p::first-letter Styles the first character of text within the element. |
| ::first-line | p::first-line Styles the first line of formatted text within the element. |
| ::before | p::before Specificies content to be inserted immediately before the selected element. |
| ::after | p::after Specificies content to be inserted immediately after the selected element. |
