In our examples below, we will use CSS pseudo-elements. A CSS pseudo-element allows us to style specific parts of an element. We might, for instance, style the first letter or first line of a paragraph. Or we might insert (and then style) some content before or after an element.
The following pseudo-elements allow us to target part of an element for styling:
::first-letter - selects the first letter of the element
::first-line - selects the first line of the element
::selection - selects the part of the element selected by the user
We might use
::first-letter, for example, to create a dropcap for a paragraph:
We can also use the following pseudo-classes to insert and style content before or after an element:
In the following example, we add a "greater than" character after the link text for any
a tag with class
We'll also make use of pseudo-classes in our code below. A CSS pseudo-class is used to define a special state of an element. You already know some of the pseudo-classes: we can use
a:hover to define a style for a link tag when the user mouses over it - changing the color of the link, say, or adding a border at bottom.
Some other useful pseudo-classes are:
:first-child - selects every element that is the first child of its parent
:first-of-type - selects every element that is the first child of its parent of the element's type
:last-child - selects every element that is the last child of its parent
:last-of-type - selects every element that is the last child of its parent of the element's type
:only-child - selects every element that is the only child of its parent
All of the code we've looked at so far works fine for modern browsers. But we can leverage some of the new powers that CSS3 gives us to remake our dropdown menus. Using the same markup - that is, the same set of nested unordered lists - let's look at how we might use some CSS3 features to render our dropdown menus. As always, we'll need to keep in mind that some newer CSS3 features won't work in older browsers.
We can extend our CSS3 menu to work for users who visit our pages on a smartphone. Using a media query, we can render our menu differently when viewed from a browser whose width is less than a given threshold.