Skip to content

Latest commit

 

History

History
38 lines (24 loc) · 1.98 KB

03pseudo.md

File metadata and controls

38 lines (24 loc) · 1.98 KB
Raw

Pseudo-Classes and Pseudo-Elements

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

Pseudo-Classes

For these specific states, we can use pseudo-classes, which have a format like this:

.button:hover {
  background-color: red;
}

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 Pseudo Classes by Brian Hague (@bhague1281) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Pseudo-Elements

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.

See the Pen Pseudo-Elements by Brian Hague (@bhague1281) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

For more pseudo-classes and pseudo-elements, see the Additional Topics links.