HTML and CSS Reference
In-Depth Information
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
scenes.
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
class.
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.
