Targeting Specific Elements Without Using IDs or Classes

Just like attribute selectors, pseudo-classes and pseudo-elements can be used to select specific elements in the HTML without assigning those elements IDs or classes, keeping your markup cleaner. Pseudo-classes and pseudo-elements target pieces of HTML that either don’t exist as standalone elements, or do exist but have a unique characteristic that you can’t target with the other simple selectors. For instance, you can use the :first-line pseudo-element to format the first line of a paragraph, even though that first line doesn’t have HTML tags wrapped around it. In this way, some pseudo-classes and pseudo-elements are even more powerful than attribute selectors, because they allow you to target elements that could never have an ID or class added to them to begin with.

Pseudo-classes and pseudo-elements as a whole are not new, or particular, to CSS3, but CSS3 added several individual pseudo-classes that allow us even more precise control over what parts of the document we want to target. Many of these new selectors are structural pseudo-classes.