Ok, that was a bad attempt at a Phil Collins joke. I apologize. But I just want to have fun with my blog and the topic for this particular post is…fun…in a way. I mean, how else can I get myself jazzed for talking about CSS Pseudo-Selectors without singing Phil Collins?
Yeah, so…how ‘bout them pseudo-selectors? They’re really…neat?
Really though, they kind of are. Knowing how to use them can make you feel like some kind of guru among developers.
Pseudo-classes and pseudo-elements are two types of selectors.
Pseudo-classes are keywords added to an element that define a specific state. a:visited is a good example, and one you run into frequently. It basically creates an action on the a element that lets you know which links you’ve visited on a webpage. Links are usually underlined and a different color from the webpage text. If a:visited has its properties defined, the link text will change color once it’s been visited. Pseudo-classes are always preceded by a single colon (:).
Pseudo-elements, on the other hand, are preceded with a double colon (::) and are used to style a specific part of an element. An example would be capitalizing the very first letter of a paragraph – p::first-letter.
For an extensive list of pseudo-selectors, check out this article from Smashing.com. It also covers syntax and when not to use pseudo-classes or pseudo-elements.