Pseudo-Classes/Elements
Last updated
Was this helpful?
Last updated
Was this helpful?
There will be cases where you'll want to apply styling to certain states of your elements. For example:
Hovering over an element
Checking a checkbox
Highlighting the first or last element
Highlighting every other element
For these specific states, we can use pseudo-classes, which have a format like this:
Notice that the CSS selectors is followed by a single colon, then the name of the pseudo-class. These selectors can be handy when compared to the alternative (using JavaScript). Here are some examples:
See the Pen by Brian Hague () on .
Similar to pseudo-classes, we can also use pseudo-elements. These selectors have two big differences from pseudo-classes.
Instead of styling element state, pseudo-elements style parts of a document
Instead of a single colon, pseudo-elements are defined with two colons.
Specifically, pseudo-elements can style first lines, first letters, as well as things you wouldn't normally think of, like the color of selected text.
For more pseudo-classes and pseudo-elements, see the Additional Topics links.
See the Pen by Brian Hague () on .
For more reading on pseudo classes and elements, see .