All About Selectors -- CSS Guide- Cascading Style Sheets

davesite.com / webstation / css

Cascading Style Sheets: an Interactive Tutorial

All About Selectors

part 3

advertisement

advertisement
#1 Web Hosting Plan! Free Software & Tools!
1000GB space, 1000GB bandwidth, just $6.95!
PSEUDO-ELEMENTS
There are two important pseudo-elements that are built into CSS capable web browsers. (There are also common pseudo-classes which you'll learn in the links chapter.)
These two elements are :first-letter and :first-line. Notice that pseudo-elements are defined with a : instead of a . or # (this is because they have special meanings to a web browser).
Here's a silly example for each: Imagine you want the first letter of each paragraph to be red, or the first-line of each paragraph to be green.
p:first-letter { color: red; }
p:first-line { color: green; }

This example is kind of
seasonal, eh?

You can also apply these pseudo-elements to only certain classes of p, for example, if you make a p called seasonal, you could use this style:
p.seasonal:first-letter { color: red; }
p.seasonal:first-line { color: green; }

<p>This paragraph is not<br> seasonal.</p>
<p class="seasonal">However, this paragraph<br> is quite seasonal.</p>

This paragraph is not
seasonal

However, this paragraph
is quite seasonal

Ready to test your skills? Try making a paragraph selector with a pseudo-element first-line that is purple. Then make an ID selector with yellow text.
<html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Click here for an answer if you get stuck or you want to see how I did it.
advertisement

< Ch. 3 part 2 > Chapter 4

Chapter Selection

Introduction
Basics of CSS
All About Selectors
Background and Color
Fonts and Text
Links
Lists
Margin
Padding
Border
Good CSS Design
Resources

[ jump to top ]

Learn about the #1 Ranked Web Host. 100 GB Space.
Up to 7 Web Sites. Free Domain & Setup. Click Here.