Pseu-Pseu-Pseudo Selectors

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 statea: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 (:).

visited_conventional

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.

Screen-Shot-2014-09-17-at-10.59.01-AM

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s