HTML and CSS Reference
The Pseudo-class Exposed
This week's interview:
Getting to know the pseudo-class.
Head First: Welcome, Pseudo-class. It's a
pleasure to have you here. I must confess that
when they first asked me to do this interview, I
drew a blank. Pseudo-class? The only thing that
came to mind was that '80s Phil Collins song.
Head First: Well then, how do they work?
Pseudo-class: You can thank your browser
for that. The browser goes through and adds all
your <a> elements to the right pseudo-classes.
If a link's been visited, no problem; it goes
into the :visited pseudo-class. Is the user
hovering over a link? No problem, the browser
throws it in the :hover pseudo-class. Oh, now
the user isn't hovering? The browser yanks it
out of the “hover” pseudo-class.
Pseudo-class: Uh, that would be Sussudio .
My name is Pseudo .
Head First: Oops. Honest mistake. Maybe we
could start there. Can you tell us a little about
where Pseudo came from?
Head First: Wow, I never knew. So there are
all these classes out there that the browser is
adding and removing elements from behind the
Pseudo-class: Pseudo usually means
something that looks like the real thing, but isn't.
Head First: And the last name? Class?
Pseudo-class: Everyone knows what a CSS
class is. It's a grouping you create to place
elements in so you can style them together. Put
“pseudo” and “class” together and you have a
pseudo-class: it acts like a class, but it isn't a real
Pseudo-class: That's right, and it's damned
important to know about; otherwise, how would
you give your links style that adapted to what
state the link was in?
Head First: So, Pseudo, do you just do links?
Pseudo-class: No, I do other elements too.
Modern browsers already support pseudo-
classes like :hover on other types of elements.
And there are some other pseudo-classes, too.
For instance, the pseudo-class :first-child
is assigned to the first child of any element, like
the first paragraph in a <blockquote> . And
you can even select the last paragraph of a
<blockquote> with the :last-child pseudo-
class. I'm quite versatile, really.
Head First: What's not real about it if it acts
like a class?
Pseudo-class: Okay, open up an HTML file
and look for the class :visited , or :link , or
:hover . Let me know when you find one.
Head First: I don't see any.
Pseudo-class: And yet, a:link ,
a:visited , and even a:hover all allow you
to specify style, just like they were classes. So,
those are pseudo-classes. In other words, you
can style pseudo-classes, but no one ever types
them into their HTML.
Head First: Well, I've certainly learned
something in this interview. Who knew that
song was actually called “Sussudio”?! Thanks
for being here, Pseudo-class.