December 13

posted Dec 13, 2011, 1:21 PM by Peter Knowles   [ updated Dec 13, 2011, 1:22 PM ]
Today we look at some interesting possibilities in CSS using something called a pseudo-class.

A "class", we know, is a way to style a number of HTML elements that share a certain HTML designation. 
For example, p.class {color:red;} will show all the HTML elements that have a <p> tag in red.

But what if you want to manage your styling with greater flexibility? 
What if you want to show only some <p> text that way? 
What if you only want to show some of the text inside the <p> tag that way? 
What if (for some reason) you only want to show the first word in each <p> element in red, and the last word in blue? 
Could you do that?

Not very easily with just class. 

But that's why they have something called: PSEUD0-CLASS (ta-daaa!)

The most common type of pseudo-class used is the one that changes a link based on whether it has been visited before, or whether you're hovering over it. The CSS coding might look something like this:

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

The comments (/*unvisited link */ etc.) give you an idea about what's going on.
a means, whenever there's a <a> tag (<a href="blah.blah.blah">)use the following code:
  • Make the text {color:#FF0000;} if the person hasn't visited the link before, 
  • Make the text {color:#00FF00;} if the person has,
  • Make the text {color:#FF00FF;} if the mouse/cursor is hovering over the link, and 
  • Make the text {color:#0000FF;} while it's being clicked/selected (this one is hard to see sometimes). 

That's a pretty simple example, but you can code the various versions of the a: psuedo-class tag to do all sorts of things: change colors, change sizes, change font-families, change font-size, change rotation, skew, visibility, etc. 

Check out the examples here to see what happens when it goes a little too far. 


So now that you've seen what they can do, you need to learn how to do them. 
The pseudo-class tutorial at w3schools.com  does a nice job walking you through the syntax, limits, and uses. Start there to get a feel for what you can do with pseudo-classes. Then, try some out on your own. The list of pseudo-class selectors at w3schools will give you lots to look at and try out. Play with them a bit, then turn in some code in a Google Doc that shows what you can do. 

Don't know what to try? Here's a challenge: 

Can you use pseudo-class selectors to.....

  1. Make a link grow and change text-style when you hover? (Easy)
  2. Make a link "disappear" when you hover over it? (Even easier, once you figure out how)
  3. Make the first letter of a paragraph larger than the rest of the paragraph? (A little tougher)
  4. Indent the first line of a paragraph? (Doesn't sound too difficult)
  5. Indent all of the lines in a paragraph EXCEPT the first line (aka hanging indent)? (Now we're getting there)
  6. Change the color of every 7th word in a paragraph from black to red? (You're an expert!)
Turn in whatever you are able to accomplish today as a Google Doc. 
Comments