Head First HTML with CSS

more on pseudo-classes
470 Chapter 11
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.
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?
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.
Head First: What’s not real about it if it
acts like a class?
Pseudo-class: Okay, open up an XHTML
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 XHTML.
Head First: Well then, how do they work?
The Pseudo-class Exposed
This week’s interview: getting to know the
pseudo-class.
Pseudo-class: You can thank your browser
for that. The browser goes through and adds
all your elements to the right pseudoclasses.
If a link’s been visited, no problem;
it goes into the “visited” class. Is the user
hovering over a link? No problem, the
browser throws it in the “hover” class. Oh,
now the user isn’t hovering? The browser
yanks it out of the “hover” class.
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: 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. Some browsers already support pseudoclasses
like active and hover on other types of
elements. And there are some other pseudoclasses,
too. For instance, the pseudo-class
:first-child is assigned to the first child of
any element, like the first paragraph in
a . But be careful on
everything other than :link, :visited, and
:hover because browser support isn’t fully
there yet.
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.