User:Bartlett/05
Hour 5. Selectors
[wax ka badal]- What You'll Learn in This Hour
- More about simple selectors you've already been using
- How to use class and id selectors
- What the universal selector is and when to use it
- What pseudo-classes and pseudo-elements are and how they can be used
- How to specify styles that affect hypertext links
As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "Getting Started with CSS," selectors are the part of the CSS rule that identifies the target of the styling. Putting the power of selectors to use is vital for getting the most out of CSS. |}
./ ADD NAME=CH05LEV1SEC1.HTML
Simple Selectors
[wax ka badal]You've seen the simplest type of selectors already: type selectors, class selectors, and id selectors. In this hour, you'll look at how you can use them more effectively.
So far you have learned how to create CSS rules using simple selectors: type selectors based on the HTML tag, and class or id selectors based on attributes in the HTML.
A type selector is simply the name of an HTML tag minus the <> angle brackets. For example:
h1 { color: blue; }
This selects all
tags and specifies that they're the color blue. Type selectors are the easiest to use because they're so straightforward, but they're also very limited. What if you want only some of the tags to be blue and others to be green? That's when you'd use class and id selectors.
Did you Know?
Although I said type selectors had to be HTML tags, I must admit that's only half true. They actually have to be any sort of legitimate element for the language you're styling; this is how you can use CSS with XML, for example. And in fact, you don't have to have the actual tag present! HTML (but not XML or XHTML) lets you leave out certain tag declarations entirely, such as the <body> element. These are implied tags. The opening and closing tags are implied. If you have a rule based on body, such as 'body { font-family: Arial; }', a CSS-compliant browser will still apply your font to the implied <body> even though no tags are present.
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch04.html#ch04 Hour 4], "Using CSS with HTML," you learned how you can set class and id selectors in your rules based on HTML attributes of class and id, such as
#here { font-size: large; }
.there { color: green; }
An id selector uniquely identifies part of a page, whereas a class selector allows you to identify specific tags as being part of a certain set you've defined.
Using class and id SelectorsYou can combine class selectors or id selectors with
<!-- imgtip-5.1.html --><br /><html><br /><head><br /><title>Image Accessibility</title><br /><link type="text/css" rel="stylesheet"<br />href="tips-5.2.css"><br /></head><br /><body><br /><div id="breadcrumb"><br /><a href="http://kynn.com">Kynn.com</a> ·<br /><a href="http://kynn.com/writing/">Writing</a> ·<br /><a href="http://kynn.com/writing/tips">Tips</a> ·<br />Images<br /></div><br /><div id="header"><br /><h1>Image Accessibility</h1><br /><h2>Making your graphics accessible</h2><br /></div><br /><div class="tips"><br /><p> Here are some helpful tips on making your graphical<br />content accessible to users who can't see images: </p><br /><ul><br /><li>Always include an <tt>alt</tt> attribute on your<br /><tt><img></tt> tag.</li><br /><li>The <tt>alt</tt> attribute should contain a short<br />replacement for the graphic, in text. If the image<br />itself has text, list that in <tt>alt</tt>.</li><br /><li>If the image is purely decorative and doesn't convey<br />any additional information, use <tt>alt=""</tt>.</li><br /><li>If there is more information in the graphic than you<br />can convey in a short <tt>alt</tt> attribute, such<br />as the information in a graph or chart, then use<br />the <tt>longdesc</tt> attribute to give the URL of<br />a page that describes the graphic in text.</li><br /></ul><br /></div><br /><div id="footer"><br /><address> Copyright © 2006 by Kynn Bartlett </address><br /></div><br /></body><br /></html><br /> |
As you can see, I linked in an external style sheet, tips-5.2.css, using a <link> tag. That style sheet defines a style for each section of the page; the sections are breadcrumb, header, tips, and footer. The style sheet is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex02 Listing 5.2].
Listing 5.2. Sectional Styles Using Classes and IDs
/* tips-5.2.css */<br />body<br />{ color: black;<br />background-color: white; }<br />#breadcrumb<br />{ font-family: Verdana, sans-serif;<br />color: black;<br />background-color: silver; }<br />#header<br />{ color: white;<br />background-color: maroon;<br />font-family: "Courier New", monospace; }<br />.tips<br />{ color: white;<br />background-color: gray;<br />font-family: Arial, sans-serif; }<br />#footer<br />{ color: silver;<br />background-color: black;<br />font-family: "Times New Roman", serif; }<br /> |
In this example, id selectors were used for the breadcrumb trail, the header, and the footer, and a class selector for the tips. Why?
Simple: You can (and probably should) use id whenever you can be sure that the id will be unique on a page. A page may contain multiple tips, but just one bread-crumb trail, one header, and one footer. The style sheet could still be written with class; it doesn't really hurt anything to use class instead of id, but style sheets are simpler and more specific if they use id.The Universal Selector
In addition to type, class, and id selectors, CSS also defines a universal selector. The universal selector applies to all tags and content within a page and is represented by an asterisk (*). Here's an example of a universal selector rule:
* { color: blue; }
If you're writing a rule that uses the universal selector and there's something else to that rule, such as a class or id selector, you can leave out the asterisk. In fact, the general way of writing class selectors is just a special case of the universal selector with the asterisk omitted. The following two declarations are identical:
*.there { color: green; }
.there { color: green; }
You may wonder why there's a need for a universal selector; as you've seen before, you can affect the style of an entire page by using a selector of the <body> tag. It's important to understand that the universal selector sets the style on all elements and doesn't just set an inherited default. What do I mean? Consider the following style sheet:
* { color: green; }
h1 { color: blue; }
Let's assume you'll link that to an HTML file that includes this:
<h1>This is <em>very</em> important</h1>
What color will the word "very" be? It will be green and in the middle of a blue headline because the universal rule says everything has the color green explicitly set, just as if there were a rule for every possible element, reading
element { color: green; }
's style, so you need to be very careful about when and where you use a universal selector. You would have gotten a very different result if you did the following:
body { color: green; }
h1 { color: blue; }
This would also make the default text green and the heading blue, but the embedded would inherit the color from the . You'll learn more about inheritance in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch07.html#ch07 Hour 7], "Cascading and Inheritance."
./ ADD NAME=CH05LEV1SEC2.HTML
Combining Simple Selectors
To get the most utility out of your CSS rules, you'll want to write combined rules. You've already learned a little about grouping selectors together; now you'll see how you can use descendant selectors as well.
Grouping Selectors
As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], you can combine rules by listing the selectors together, separating them by commas. You can combine any sort of selectors in this way, such as in the following rule:
/* Anything that is sorta heading-like is in Arial;
only even headings are maroon and the rest are green */
h1, h2, h3, h4, h5, h6, dt, .heading, .standout, #headline
{ font-family: Arial; }
h1, h3, h5, dt, .heading, .standout, #headline
{ font-color: maroon; }
h2, h4, h6
{ font-color: green; }
Alternately, you could have written the same set of rules in another way by grouping them differently:
/* Anything that is sorta heading-like is in Arial;
only even headings are maroon, and the rest are green */
h1, h3, h5, dt, .heading, .standout, #headline
{ font-family: Arial;
font-color: maroon; }
h2, h4, h6
{ font-family: Arial;
font-color: green; }
Writing it the first way makes it easier to change the font family if you need to; the declaration font-family: Arial; appears in only one place in your document. The way you group your rules can improve the ease with which you can modify them. Note, though, that there's a drawback to this approach, as well; to change how one type of selector is rendered (say, anything in the standout class), you need to edit several rules. There are no hard-and-fast guidelines, therefore, about how you can group your rules in modules; as you gain experience with CSS, you'll form your own methods for style rules grouping.
Descendant Selectors
One of the most useful ways to group selectors together is to use a descendant selector. A descendant, in HTML and XML, is an element that's completely contained within another element's content. As an example, the is a descendant of the , and the of the , in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3]. The is also a descendant of the , as it's contained by both the and the , and they are all descendants of the <body> element.
Listing 5.3. Descendants in HTML
<!-- babe-5.3.html --><br /><html><br /><head><br /><title>Babe: Best Movie EVER</title><br /><style type="text/css"><br />/* add style rules here */<br /></style><br /></head><br /><body><br /><div class="header"><br /><h1>Movie Review: <cite>Babe</cite></h1><br /><p>A Mini-Review by Joe H. Moviefan</p><br /></div><br /><div class="opinion"><br /><h2>The Best Movie <em>EVER</em></h2><br /><p>The movie <cite>Babe</cite> was the best family<br />movie ever produced! This great movie featured<br />talking animals, a cantankerous old man, and<br />subtle-yet-Oscar-winning special effects -- who<br />could ask for more? The clever writing and<br />humorous touches make this all-ages movie great<br />for children while still very enjoyable by<br />adults. What a great movie!</p><br /></div><br /><div class="footer"><br /><p>What did you think? Mail me at<br /><a href="mailto:joe@example.com">Joe H.<br />Moviefan.com!</a></p><br /></div><br /></body><br /></html><br />
Descendant selectors define rules based on where a given tag appears within the page by combining together simple selectors, separated by spaces. For example, here's a rule to change the color of all tags contained within paragraphs:
p cite { color: white; background-color: black; }
You'll notice that I listed the outside tag first and then the inside. If you did it the other way around, you wouldn't match anything because no cite tags contain paragraph tags.
If this rule is added to the <style> element of the HTML page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3], the effect shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig02 Figure 5.2] is produced. Notice that the within the is not styled by this rule, only the inside the
element.
Figure 5.2. Firefox displays the second with the chosen style.
File:05fig02.jpg
It's important to keep in mind that a descendant selector means any descendant, not just an immediate child. A descendant could be an element inside an element inside an element. This enables you to make rules that apply to any descendant element, no matter how deeply it's nested.
You can combine section styles (set via class and ) with element-based type selectors, as well; for example, the following code changes the font face and colors of tags within the header section, but leaves the rest of the header aloneas well as the other paragraph tags that aren't contained by something with the .header class:
.header p { font-family: Verdana, sans-serif;
color: white; background-color: black; }
The effects of this rule are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig03 Figure 5.3].
Figure 5.3. Changing the header paragraph font style.
File:05fig03.jpg
A more complete style sheet that demonstrates how to set a number of different combined selectors is listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex04 Listing 5.4]. To use this with my movie review page, I'll add the following to the <head> of the page:
<link type="text/css" rel="stylesheet" href="babe-5.4.css">
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig04 Figure 5.4] shows how [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] looks with this style sheet applied.
Figure 5.4. Displaying various selectors with separate styles. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig04_alt.jpg [View full size image]]File:05fig04.jpg
Listing 5.4. A Variety of Selectors in a Single Style Sheet
/* babe-5.4.css: Style sheet for Babe review */<br />body<br />{ font-family: Arial, sans-serif;<br />color: black;<br />background-color: white; }<br />.header h1<br />{ font-family: "Courier New", monospace;<br />color: silver;<br />background-color: black; }<br />.header cite<br />{ font-family: Verdana, sans-serif;<br />background-color: silver;<br />color: black; }<br />.header p<br />{ font-family: Arial, monospace;<br />color: black;<br />font-size: x-large; }<br />.opinion h2<br />{ color: white;<br />background-color: navy;<br />font-family: Arial, sans-serif; }<br />em<br />{ font-size: larger; }<br />p cite<br />{ color: white;<br />background-color: black; }<br />.footer<br />{ font-family: "Times New Roman", serif;<br />font-size: small;<br />color: white;<br />background-color: gray; }<br />.footer a<br />{ color: white;<br />background-color: black; }<br />
Try it Yourself: Experimenting with Simple Selectors
Why not try out these selectors yourself? You can use the example HTML files from this chapter.
1.
Download either the accessibility tip in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] or the movie review in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] from the book's website.
2.
Open the HTML file in a browser and view it without styles.
3.
Create a style sheet. Add your own style rules based on the class and id attributes set in the HTML. Choose your own text colors, backgrounds, font sizes, and other properties.
4.
Link your style sheet to the HTML file with the <link> element and view it in a browser. Are they styled the way you wanted? If not, try again until you're satisfied.
5.
Add to the HTML filesrewrite the text, add more paragraphs, create new class and id attributes. Write new CSS rules based on these! Or even better, write your own pages from scratch and use your own content for testing out combined selectors.
./ ADD NAME=CH05LEV1SEC3.HTML
Pseudo-Classes and Pseudo-Elements
In addition to type selectors, id selectors, and class selectors, CSS also allows pseudo-class and pseudo-element selectors.
A pseudo-class selector is a selector based on a set of predefined qualities that an HTML element can possess. These qualities function in practice similar to a class attribute on the element, so in CSS terms, they are called pseudo-classes. No actual class attributes exist in the markup that corresponds to these pseudo-classes; instead, they represent some aspect of the element to which they're applied, or even the state of the browser's user interface relative to that element.
A pseudo-element selector identifies a virtual element, one that doesn't exist in the markup but can be deduced by the browser and used to apply a style. As with pseudo-classes, there is no markup that corresponds to the pseudo-element.
Simple Pseudo-Classes
The pseudo-classes in CSS are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table01 Table 5.1]. The :active, :focus, and :hover pseudo-classes are covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12], "Styling Links."
Pseudo-class
Selects
:active
Elements that have been activated (such as active links)
:first-child
The first child of an element
:focus
Elements that have focus (such as form fields receiving input)
:hover
Elements that are pointed at (such as by a mouse)
:lang()
Styles for a specific language
:link
Unfollowed links
:visited
Previously visited links
Pseudo-classes can stand alone in a style rule, as classes can, but most commonly they're used with elements as a type selector, as follows:
:link { color: red; }
a:link { color: red; }
Both these rules are valid; the former applies to any element that happens to be a link, whereas the latter rule covers only <a> tags. In practice, these are the same things in HTML: Only the <a> elements are links, and so the rules mean the same thing.
You can combine pseudo-classes with real classes or even other pseudo-classes by putting them together with no spaces between, just the . and : indicators. For example, here's HTML with class attributes set on links:
<a href="search.html" class="nav">
Search the Site
</a>
...
<a href="http://www.idyllmtn.com/" class="offsite">
Idyll Mountain Internet
</a>
Here are rules to work with each of those links; note that the order of the class and the pseudo-class doesn't matter:
a:link.nav { color: cyan; }
a.offsite:link { color: green; }
The :link and :visited Pseudo-Classes
In HTML, you can use attributes on the <body> tag to determine the colors of links:
<body link="red" visited="gray">
CSS gives the same functionality through pseudo-classes, and by combining pseudo-class selectors with class or id selectors, you can put different link colors on different parts of the page as you'll see later in this hour.
The :link pseudo-class is the equivalent of the <body> attribute link in HTML: It defines a style for links that have yet to be followed. You usually set these on the <a> tag because <a> is the only visible linking element in HTML. Here's an example CSS rule using :link:
a:link { color: red; }
Visited links are those that the user has already been to; the browser keeps track of a list of visited URLs and colors them differently. The :visited pseudo-class is used to write rules applying to those types of links, as follows:
a:visited { color: gray; }
The :link and :visited pseudo-selectors are mutually exclusive; a given link is either one or the other at any given time and can't be both at once. However, you can write a rule that applies to both, such as
a:link,
a:visited { color: blue; }
Watch Out!
Note that changing the :link and :visited colors to the same value can cause problems for users! Most users expect links to change to some coloranything other than the original, although usually from blue to purpleafter they have been visited. Unless you've got a good reason for it, you'll probably want to supply different :link and :visited colors.
Unlike HTML, which lets you change only the colors of the links, CSS allows you to apply nearly any style to unvisited or visited links by using the :link and :visited pseudo-selectors. For example:
a:link { color: black;
background-color: lime;
font-family: Arial, sans-serif; }
a:visited { color: gray;
background-color: yellow;
font-family: "Times New Roman", serif; }
This puts your unvisited links in black text on a lime green background and puts the visited links in gray on a yellow background. Unvisited links are in Arial font, and visited links are in Times New Roman. Now, apart from an illustrative example, you never want to write rules like these; it doesn't make sense, for example, for the font face to change when you've clicked on a link and some of my color choices are just plain ugly. Background colors on links do help them stand out from rest of the page, though, and that's not such a bad thing. You'll learn more about the theory behind link styles in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12].
To color links differently on different sections of the page, combine :link and :visited pseudo-selectors with section classes in a descendant selector, like this:
#breadcrumb { background-color: black; color: white; }
#breadcrumb a:link { color: cyan; font-size: large; }
#breadcrumb a:visited { font-size: small; color: fuchsia; }
This creates a black breadcrumb trail with unvisited links in large cyan letters (bright blue) and visited links in smaller, fuchsia (bright purple). If you add these styles to the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex02 Listing 5.2], the accessibility tip page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] will look like the page shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig05 Figure 5.5].
Figure 5.5. Pseudo-class selectors coloring links on a page. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig05_alt.jpg [View full size image]]File:05fig05.jpg
The :first-child Pseudo-Class
The :first-child pseudo-class is used to select an element that's the first child of another element. The first child is the first tag within some other element; if the first child matches the base type of the selectorthe part before the :first-child pseudo-classthen the rule applies to that element.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] shows the start of a short story. The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] sets the first paragraph of the story to be larger than the rest, as well as gives it a silver background. The results are displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig06 Figure 5.6].
Listing 5.5. A Few Paragraphs in HTML
<!-- story-5.5.html --><br /><html><br /><head><br /><title>Fortune of Reversal</title><br /><link type="text/css" rel="stylesheet"<br />href="story-5.7.css"><br /></head><br /><body><br /><h1 id="storytitle">Fortune of Reversal</h1><br /><div class="storybody"><br /><p>They dined on heaping platters of Szechuan chicken, of<br />spicy beef, of shrimp and vegetables in some exotic dish<br />without a name. Bits of food were passed from chopsticks<br />to chopsticks, violating all known laws of Chinese<br />cuisine etiquette. The tea flowed hot and fast that night,<br />until the meal finally concluded itself.</p><br /><p>"Thank you for dining here tonight," said the badgeless,<br />anonymous waitress. She placed a small tray containing the<br />check and two wrapped fortune cookies on the edge of the<br />table, and hefted the empty plates one by one, forming a<br />stack on the crook of her elbow.</p><br /><p>"Absolutely delicious," declared Oliver as he pulled a card<br />from his wallet and flicked it onto the bill. He picked up<br />the two cookies, an afterthought. "Fortune cookie, my<br />love?" he asked Amanda.</p><br /></div><br /></body><br /></html><br />
Listing 5.6. A Style Sheet Using :first-child Pseudo-Class Selector
/* story-5.6.css */<br /><br />#storytitle<br />{ font-family: Verdana; }<br /><br />.storybody p<br />{ font-family: Arial; }<br /><br />.storybody p:first-child<br />{ font-size: x-large;<br />background-color: silver; }<br />
Figure 5.6. Firefox uses the :first-child selector to style the first paragraph.
File:05fig06.jpg
Watch Out!
Internet Explorer for Windows does not support the :first-child pseudo-element; rules with such selectors are ignored. For maximum compatibility, set a class attribute manually on your first child elements, such as class="firstone", and then include that class as an additional selector in your rule. For example:
.storybody p:first-child, .storybody p.firstone
{ font-size: large; }
Of course, by doing so you've made the first half of the selector redundantthe other browsers understand the class-based workaround! So you may want to drop the use of :first-child entirely if you're going to add this workaround.
The :lang() Pseudo-Class
On the Web, languages are indicated by a two-letter code, sometimes followed by a dash and an additional country code for regional versions of a language. Some of these languages are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table02 Table 5.2]; for a complete list, see the book's website.
Code
Language
de
German
en
English
en-ca
Canadian English
en-uk
British English
en-us
American English
fr
French
jp
Japanese
ru
Russian
The choice of language can dictate a number of factors, including the direction of the text, the fonts used, or even the dictionary for pronunciation used by a screen reader. The CSS language doesn't allow you to set the language, which must be done in the HTML or in an HTTP header, but it does let you create rules or style sheets that apply to only certain languages.
To set the language within an HTML document, you simply have to use the lang attribute on the <html> tag. Sections of a second language embedded within the document can be indicated with the lang attribute on a or any other appropriate HTML element, such as or
.
The CSS specification defines a special pseudo-class, :lang(), for indicating rules that should be applied only to elements that match a certain language. Such a rule is written like the following:
:lang(en-uk) { background-color: #CCCCFF; }
This would display anything written in British English with a light blue background color. How does the browser know which parts of the text are written in British English? It needs to be set in the HTML, as in the following:
<p>He cried out in a bad Monty Python imitation,
<span lang="en-uk">He's pinin' for the fjords!</span>
</p>
By itself, :lang() is not particularly useful, but when combined with other CSS rules and properties, it can be quite powerful.
Pseudo-Elements in CSS
Cascading Style Sheets defines four pseudo-elementsvirtual elements created from their content in the document in relationship to a base element. These are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table03 Table 5.3]. The pseudo-elements :before and :after are used to insert generated content and are discussed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch23.html#ch23 Hour 23], "User Interface and Generated Content."
Pseudo-Element
Selects
:before
Inserts something before an element
:after
Inserts something after an element
:first-letter
The first letter of a block element
:first-line
The first line of a block element
The pseudo-elements :first-line and :first-letter select portions of another element, and these portions operate as if they were separate inline elements; however, only certain properties can be applied to these pseudo-elements, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table04 Table 5.4].
Property or Category
:first-line
:first-letter
Hour Covered
Background properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch11.html#ch11 Hour 11]
Border properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
Color properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
Font properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch09.html#ch09 Hour 9]
Margin properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
Padding properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
clear
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
float
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
letter-spacing
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
line-height
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-decoration
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-shadow
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-TRansform
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
vertical-align
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
word-spacing
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
The :first-line Pseudo-Element
The :first-line pseudo-element is a virtual element used to identify the first line of an element for adding specific styles that apply to only the first line. For example, you might want to put the first line of a news story in larger print to make it stand out. Such a rule would look like this:
p:first-line { font-size: large; }
A :first-line pseudo-element creates a fictional tag set that is similar to a or another inline element but whose content is determined when the page is rendered. As much as will fit on one line is included in the fictional tag. This will vary depending on the size of the user's browser window, the font size, and other factors, so there's no way to calculate it beforehand. This means that there aren't any viable workarounds for browsers that don't support :first-line because there's no way to know what will fit on one line. Fortunately, the current versions of modern browsers support :first-line.
The :first-letter Pseudo-Element
A :first-letter selector also references one of those imaginary, generated elements that doesn't appear in the source code but can be referenced by CSS rules. In this case, the imaginary tag is one surrounding the first letter of the element. The most common use for this is creating an initial capital letter that's larger than surrounding text.
Here's an example of a style sheet that uses both :first-letter and :first-line:
/* story-5.7.css */
#storytitle
{ font-family: Verdana, sans-serif; }
.storybody p
{ font-family: Arial, sans-serif; }
.storybody p:first-line
{ background-color: silver; }
.storybody p:first-letter
{ font-size: xx-large;
color: white;
background-color: black;
font-family: Verdana, sans-serif; }
The result of applying this style sheet to the story sample from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7].
Figure 5.7. A large initial capital letter styled by a :first-letter rule. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig07_alt.jpg [View full size image]]File:05fig07.jpg
Try it Yourself: Using :first-letter with :first-child
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7], each paragraph begins with a large capital letter, white on a black background. In many situations, however, only the first paragraph should have such a large initial capital letter. Make it so by doing the following:
1.
Download both the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] and the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] from the book's website.
>
>
2.
Edit the .storybody p:first-letter rule so that it looks like this:
.storybody p:first-child:first-letter<br />{ font-size: xx-large;<br />color: white;<br />background-color: black;<br />font-family: Verdana, sans-serif; }<br />
3.
Open this in your browser. How does it look? If you aren't using Internet Explorer for Windows, you should see that only the first paragraph has a large initial capital letter.
4.
How can you fix this to work in Internet Explorer? Recall the warning and work-around earlier this chapter.
5.
Edit your HTML and CSS file to add a class and a style rule that will make your initial capital letter Internet Explorer-proof.
./ ADD NAME=CH05LEV1SEC4.HTML
Summary
[wax ka badal]
The selector is the part of the CSS rule that designates the recipient of the styles defined in the style declaration. Type selectors can be used to style specific types of HTML elements, and class and id selectors choose them according to attribute values. The universal selector sets a style on all elements.
You create a descendant selector by combining two or more simple selectors together to show the hierarchy of the elements on the page. Using this technique, you can apply different styles to different sections of the page.
Pseudo-element and pseudo-class selectors let you select parts of the page that aren't otherwise distinguished in the HTML. Rules with :link and :visited pseudo-class selectors can be used to style hypertext links. The :lang() pseudo-class can add styles to text in specific languages. The :first-child, :first-letter, and :first-line selectors are used for text formatting.
./ ADD NAME=CH05LEV1SEC5.HTML
Workshop
[wax ka badal]
The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1a1 Q.]
Are there other selectors that aren't covered here?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1 A.]
Yes, and you'll learn about them in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], "Advanced Selectors." Some of these are not well supported by the browsers, however.
>
>
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2a2 Q.]
Can I string together as many selectors as I like?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2 A.]
Certainly. You aren't limited to just two items in a descendant selector, for example. You could write a rule with a selector like the following, if you wanted:
body div #content p.special a:visited { color: green; }<br />
Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1a1 1.]
Which of the following selectors means "select any tag that's both part of the class old and within a tag?"
# em.old p
- em.old, p
- p.old em
- p em.old
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2a2 2.]
What rules would you write to make all visited links red and all unvisited links lime, and to make both kinds of links display in Arial font?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3a3 3.]
Which pseudo-element or pseudo-class can't be duplicated by using a tag with an appropriate class set, and why?
# :first-child
- :first-line
- :first-letter
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1 1.]
The correct answer is (d), p em.old.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2 2.]
Here is one set of CSS rules to make unvisited links lime and visited links red, both in Arial font:
a:link { color: red; font-family: Arial, sans-serif; }<br />a:visited { color: lime; font-family: Arial, sans-serif; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3 3.]
The :first-line cannot be duplicated by the tag because the author of the web page doesn't know where the first line will end when displayed on the user's browser.
Exercise
In this hour, you saw several HTML pages and associated style sheets that used selectors to style the page. To further explore selectors, you can create additional style rules by selecting specific elements and styling them appropriately.
./ ADD NAME=CH06.HTML
body { color: green; }
h1 { color: blue; }
. You'll learn more about inheritance in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch07.html#ch07 Hour 7], "Cascading and Inheritance." ./ ADD NAME=CH05LEV1SEC2.HTML
Combining Simple Selectors
To get the most utility out of your CSS rules, you'll want to write combined rules. You've already learned a little about grouping selectors together; now you'll see how you can use descendant selectors as well.
Grouping Selectors
As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], you can combine rules by listing the selectors together, separating them by commas. You can combine any sort of selectors in this way, such as in the following rule:
/* Anything that is sorta heading-like is in Arial;
only even headings are maroon and the rest are green */
h1, h2, h3, h4, h5, h6, dt, .heading, .standout, #headline
{ font-family: Arial; }
h1, h3, h5, dt, .heading, .standout, #headline
{ font-color: maroon; }
h2, h4, h6
{ font-color: green; }
Alternately, you could have written the same set of rules in another way by grouping them differently:
/* Anything that is sorta heading-like is in Arial;
only even headings are maroon, and the rest are green */
h1, h3, h5, dt, .heading, .standout, #headline
{ font-family: Arial;
font-color: maroon; }
h2, h4, h6
{ font-family: Arial;
font-color: green; }
Writing it the first way makes it easier to change the font family if you need to; the declaration font-family: Arial; appears in only one place in your document. The way you group your rules can improve the ease with which you can modify them. Note, though, that there's a drawback to this approach, as well; to change how one type of selector is rendered (say, anything in the standout class), you need to edit several rules. There are no hard-and-fast guidelines, therefore, about how you can group your rules in modules; as you gain experience with CSS, you'll form your own methods for style rules grouping.
Descendant SelectorsOne of the most useful ways to group selectors together is to use a descendant selector. A descendant, in HTML and XML, is an element that's completely contained within another element's content. As an example, the
is a descendant of the , and the of the , in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3]. The is also a descendant of the , as it's contained by both the and the , and they are all descendants of the <body> element.
Listing 5.3. Descendants in HTML
<!-- babe-5.3.html --><br /><html><br /><head><br /><title>Babe: Best Movie EVER</title><br /><style type="text/css"><br />/* add style rules here */<br /></style><br /></head><br /><body><br /><div class="header"><br /><h1>Movie Review: <cite>Babe</cite></h1><br /><p>A Mini-Review by Joe H. Moviefan</p><br /></div><br /><div class="opinion"><br /><h2>The Best Movie <em>EVER</em></h2><br /><p>The movie <cite>Babe</cite> was the best family<br />movie ever produced! This great movie featured<br />talking animals, a cantankerous old man, and<br />subtle-yet-Oscar-winning special effects -- who<br />could ask for more? The clever writing and<br />humorous touches make this all-ages movie great<br />for children while still very enjoyable by<br />adults. What a great movie!</p><br /></div><br /><div class="footer"><br /><p>What did you think? Mail me at<br /><a href="mailto:joe@example.com">Joe H.<br />Moviefan.com!</a></p><br /></div><br /></body><br /></html><br />
Descendant selectors define rules based on where a given tag appears within the page by combining together simple selectors, separated by spaces. For example, here's a rule to change the color of all tags contained within paragraphs:
p cite { color: white; background-color: black; }
You'll notice that I listed the outside tag first and then the inside. If you did it the other way around, you wouldn't match anything because no cite tags contain paragraph tags.
If this rule is added to the <style> element of the HTML page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3], the effect shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig02 Figure 5.2] is produced. Notice that the within the is not styled by this rule, only the inside the
element.
Figure 5.2. Firefox displays the second with the chosen style.
File:05fig02.jpg
It's important to keep in mind that a descendant selector means any descendant, not just an immediate child. A descendant could be an element inside an element inside an element. This enables you to make rules that apply to any descendant element, no matter how deeply it's nested.
You can combine section styles (set via class and ) with element-based type selectors, as well; for example, the following code changes the font face and colors of tags within the header section, but leaves the rest of the header aloneas well as the other paragraph tags that aren't contained by something with the .header class:
.header p { font-family: Verdana, sans-serif;
color: white; background-color: black; }
The effects of this rule are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig03 Figure 5.3].
Figure 5.3. Changing the header paragraph font style.
File:05fig03.jpg
A more complete style sheet that demonstrates how to set a number of different combined selectors is listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex04 Listing 5.4]. To use this with my movie review page, I'll add the following to the <head> of the page:
<link type="text/css" rel="stylesheet" href="babe-5.4.css">
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig04 Figure 5.4] shows how [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] looks with this style sheet applied.
Figure 5.4. Displaying various selectors with separate styles. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig04_alt.jpg [View full size image]]File:05fig04.jpg
Listing 5.4. A Variety of Selectors in a Single Style Sheet
/* babe-5.4.css: Style sheet for Babe review */<br />body<br />{ font-family: Arial, sans-serif;<br />color: black;<br />background-color: white; }<br />.header h1<br />{ font-family: "Courier New", monospace;<br />color: silver;<br />background-color: black; }<br />.header cite<br />{ font-family: Verdana, sans-serif;<br />background-color: silver;<br />color: black; }<br />.header p<br />{ font-family: Arial, monospace;<br />color: black;<br />font-size: x-large; }<br />.opinion h2<br />{ color: white;<br />background-color: navy;<br />font-family: Arial, sans-serif; }<br />em<br />{ font-size: larger; }<br />p cite<br />{ color: white;<br />background-color: black; }<br />.footer<br />{ font-family: "Times New Roman", serif;<br />font-size: small;<br />color: white;<br />background-color: gray; }<br />.footer a<br />{ color: white;<br />background-color: black; }<br />
Try it Yourself: Experimenting with Simple Selectors
Why not try out these selectors yourself? You can use the example HTML files from this chapter.
1.
Download either the accessibility tip in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] or the movie review in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] from the book's website.
2.
Open the HTML file in a browser and view it without styles.
3.
Create a style sheet. Add your own style rules based on the class and id attributes set in the HTML. Choose your own text colors, backgrounds, font sizes, and other properties.
4.
Link your style sheet to the HTML file with the <link> element and view it in a browser. Are they styled the way you wanted? If not, try again until you're satisfied.
5.
Add to the HTML filesrewrite the text, add more paragraphs, create new class and id attributes. Write new CSS rules based on these! Or even better, write your own pages from scratch and use your own content for testing out combined selectors.
./ ADD NAME=CH05LEV1SEC3.HTML
Pseudo-Classes and Pseudo-Elements
In addition to type selectors, id selectors, and class selectors, CSS also allows pseudo-class and pseudo-element selectors.
A pseudo-class selector is a selector based on a set of predefined qualities that an HTML element can possess. These qualities function in practice similar to a class attribute on the element, so in CSS terms, they are called pseudo-classes. No actual class attributes exist in the markup that corresponds to these pseudo-classes; instead, they represent some aspect of the element to which they're applied, or even the state of the browser's user interface relative to that element.
A pseudo-element selector identifies a virtual element, one that doesn't exist in the markup but can be deduced by the browser and used to apply a style. As with pseudo-classes, there is no markup that corresponds to the pseudo-element.
Simple Pseudo-Classes
The pseudo-classes in CSS are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table01 Table 5.1]. The :active, :focus, and :hover pseudo-classes are covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12], "Styling Links."
Pseudo-class
Selects
:active
Elements that have been activated (such as active links)
:first-child
The first child of an element
:focus
Elements that have focus (such as form fields receiving input)
:hover
Elements that are pointed at (such as by a mouse)
:lang()
Styles for a specific language
:link
Unfollowed links
:visited
Previously visited links
Pseudo-classes can stand alone in a style rule, as classes can, but most commonly they're used with elements as a type selector, as follows:
:link { color: red; }
a:link { color: red; }
Both these rules are valid; the former applies to any element that happens to be a link, whereas the latter rule covers only <a> tags. In practice, these are the same things in HTML: Only the <a> elements are links, and so the rules mean the same thing.
You can combine pseudo-classes with real classes or even other pseudo-classes by putting them together with no spaces between, just the . and : indicators. For example, here's HTML with class attributes set on links:
<a href="search.html" class="nav">
Search the Site
</a>
...
<a href="http://www.idyllmtn.com/" class="offsite">
Idyll Mountain Internet
</a>
Here are rules to work with each of those links; note that the order of the class and the pseudo-class doesn't matter:
a:link.nav { color: cyan; }
a.offsite:link { color: green; }
The :link and :visited Pseudo-Classes
In HTML, you can use attributes on the <body> tag to determine the colors of links:
<body link="red" visited="gray">
CSS gives the same functionality through pseudo-classes, and by combining pseudo-class selectors with class or id selectors, you can put different link colors on different parts of the page as you'll see later in this hour.
The :link pseudo-class is the equivalent of the <body> attribute link in HTML: It defines a style for links that have yet to be followed. You usually set these on the <a> tag because <a> is the only visible linking element in HTML. Here's an example CSS rule using :link:
a:link { color: red; }
Visited links are those that the user has already been to; the browser keeps track of a list of visited URLs and colors them differently. The :visited pseudo-class is used to write rules applying to those types of links, as follows:
a:visited { color: gray; }
The :link and :visited pseudo-selectors are mutually exclusive; a given link is either one or the other at any given time and can't be both at once. However, you can write a rule that applies to both, such as
a:link,
a:visited { color: blue; }
Watch Out!
Note that changing the :link and :visited colors to the same value can cause problems for users! Most users expect links to change to some coloranything other than the original, although usually from blue to purpleafter they have been visited. Unless you've got a good reason for it, you'll probably want to supply different :link and :visited colors.
Unlike HTML, which lets you change only the colors of the links, CSS allows you to apply nearly any style to unvisited or visited links by using the :link and :visited pseudo-selectors. For example:
a:link { color: black;
background-color: lime;
font-family: Arial, sans-serif; }
a:visited { color: gray;
background-color: yellow;
font-family: "Times New Roman", serif; }
This puts your unvisited links in black text on a lime green background and puts the visited links in gray on a yellow background. Unvisited links are in Arial font, and visited links are in Times New Roman. Now, apart from an illustrative example, you never want to write rules like these; it doesn't make sense, for example, for the font face to change when you've clicked on a link and some of my color choices are just plain ugly. Background colors on links do help them stand out from rest of the page, though, and that's not such a bad thing. You'll learn more about the theory behind link styles in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12].
To color links differently on different sections of the page, combine :link and :visited pseudo-selectors with section classes in a descendant selector, like this:
#breadcrumb { background-color: black; color: white; }
#breadcrumb a:link { color: cyan; font-size: large; }
#breadcrumb a:visited { font-size: small; color: fuchsia; }
This creates a black breadcrumb trail with unvisited links in large cyan letters (bright blue) and visited links in smaller, fuchsia (bright purple). If you add these styles to the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex02 Listing 5.2], the accessibility tip page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] will look like the page shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig05 Figure 5.5].
Figure 5.5. Pseudo-class selectors coloring links on a page. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig05_alt.jpg [View full size image]]File:05fig05.jpg
The :first-child Pseudo-Class
The :first-child pseudo-class is used to select an element that's the first child of another element. The first child is the first tag within some other element; if the first child matches the base type of the selectorthe part before the :first-child pseudo-classthen the rule applies to that element.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] shows the start of a short story. The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] sets the first paragraph of the story to be larger than the rest, as well as gives it a silver background. The results are displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig06 Figure 5.6].
Listing 5.5. A Few Paragraphs in HTML
<!-- story-5.5.html --><br /><html><br /><head><br /><title>Fortune of Reversal</title><br /><link type="text/css" rel="stylesheet"<br />href="story-5.7.css"><br /></head><br /><body><br /><h1 id="storytitle">Fortune of Reversal</h1><br /><div class="storybody"><br /><p>They dined on heaping platters of Szechuan chicken, of<br />spicy beef, of shrimp and vegetables in some exotic dish<br />without a name. Bits of food were passed from chopsticks<br />to chopsticks, violating all known laws of Chinese<br />cuisine etiquette. The tea flowed hot and fast that night,<br />until the meal finally concluded itself.</p><br /><p>"Thank you for dining here tonight," said the badgeless,<br />anonymous waitress. She placed a small tray containing the<br />check and two wrapped fortune cookies on the edge of the<br />table, and hefted the empty plates one by one, forming a<br />stack on the crook of her elbow.</p><br /><p>"Absolutely delicious," declared Oliver as he pulled a card<br />from his wallet and flicked it onto the bill. He picked up<br />the two cookies, an afterthought. "Fortune cookie, my<br />love?" he asked Amanda.</p><br /></div><br /></body><br /></html><br />
Listing 5.6. A Style Sheet Using :first-child Pseudo-Class Selector
/* story-5.6.css */<br /><br />#storytitle<br />{ font-family: Verdana; }<br /><br />.storybody p<br />{ font-family: Arial; }<br /><br />.storybody p:first-child<br />{ font-size: x-large;<br />background-color: silver; }<br />
Figure 5.6. Firefox uses the :first-child selector to style the first paragraph.
File:05fig06.jpg
Watch Out!
Internet Explorer for Windows does not support the :first-child pseudo-element; rules with such selectors are ignored. For maximum compatibility, set a class attribute manually on your first child elements, such as class="firstone", and then include that class as an additional selector in your rule. For example:
.storybody p:first-child, .storybody p.firstone
{ font-size: large; }
Of course, by doing so you've made the first half of the selector redundantthe other browsers understand the class-based workaround! So you may want to drop the use of :first-child entirely if you're going to add this workaround.
The :lang() Pseudo-Class
On the Web, languages are indicated by a two-letter code, sometimes followed by a dash and an additional country code for regional versions of a language. Some of these languages are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table02 Table 5.2]; for a complete list, see the book's website.
Code
Language
de
German
en
English
en-ca
Canadian English
en-uk
British English
en-us
American English
fr
French
jp
Japanese
ru
Russian
The choice of language can dictate a number of factors, including the direction of the text, the fonts used, or even the dictionary for pronunciation used by a screen reader. The CSS language doesn't allow you to set the language, which must be done in the HTML or in an HTTP header, but it does let you create rules or style sheets that apply to only certain languages.
To set the language within an HTML document, you simply have to use the lang attribute on the <html> tag. Sections of a second language embedded within the document can be indicated with the lang attribute on a or any other appropriate HTML element, such as or
.
The CSS specification defines a special pseudo-class, :lang(), for indicating rules that should be applied only to elements that match a certain language. Such a rule is written like the following:
:lang(en-uk) { background-color: #CCCCFF; }
This would display anything written in British English with a light blue background color. How does the browser know which parts of the text are written in British English? It needs to be set in the HTML, as in the following:
<p>He cried out in a bad Monty Python imitation,
<span lang="en-uk">He's pinin' for the fjords!</span>
</p>
By itself, :lang() is not particularly useful, but when combined with other CSS rules and properties, it can be quite powerful.
Pseudo-Elements in CSS
Cascading Style Sheets defines four pseudo-elementsvirtual elements created from their content in the document in relationship to a base element. These are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table03 Table 5.3]. The pseudo-elements :before and :after are used to insert generated content and are discussed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch23.html#ch23 Hour 23], "User Interface and Generated Content."
Pseudo-Element
Selects
:before
Inserts something before an element
:after
Inserts something after an element
:first-letter
The first letter of a block element
:first-line
The first line of a block element
The pseudo-elements :first-line and :first-letter select portions of another element, and these portions operate as if they were separate inline elements; however, only certain properties can be applied to these pseudo-elements, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table04 Table 5.4].
Property or Category
:first-line
:first-letter
Hour Covered
Background properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch11.html#ch11 Hour 11]
Border properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
Color properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
Font properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch09.html#ch09 Hour 9]
Margin properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
Padding properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
clear
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
float
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
letter-spacing
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
line-height
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-decoration
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-shadow
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-TRansform
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
vertical-align
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
word-spacing
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
The :first-line Pseudo-Element
The :first-line pseudo-element is a virtual element used to identify the first line of an element for adding specific styles that apply to only the first line. For example, you might want to put the first line of a news story in larger print to make it stand out. Such a rule would look like this:
p:first-line { font-size: large; }
A :first-line pseudo-element creates a fictional tag set that is similar to a or another inline element but whose content is determined when the page is rendered. As much as will fit on one line is included in the fictional tag. This will vary depending on the size of the user's browser window, the font size, and other factors, so there's no way to calculate it beforehand. This means that there aren't any viable workarounds for browsers that don't support :first-line because there's no way to know what will fit on one line. Fortunately, the current versions of modern browsers support :first-line.
The :first-letter Pseudo-Element
A :first-letter selector also references one of those imaginary, generated elements that doesn't appear in the source code but can be referenced by CSS rules. In this case, the imaginary tag is one surrounding the first letter of the element. The most common use for this is creating an initial capital letter that's larger than surrounding text.
Here's an example of a style sheet that uses both :first-letter and :first-line:
/* story-5.7.css */
#storytitle
{ font-family: Verdana, sans-serif; }
.storybody p
{ font-family: Arial, sans-serif; }
.storybody p:first-line
{ background-color: silver; }
.storybody p:first-letter
{ font-size: xx-large;
color: white;
background-color: black;
font-family: Verdana, sans-serif; }
The result of applying this style sheet to the story sample from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7].
Figure 5.7. A large initial capital letter styled by a :first-letter rule. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig07_alt.jpg [View full size image]]File:05fig07.jpg
Try it Yourself: Using :first-letter with :first-child
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7], each paragraph begins with a large capital letter, white on a black background. In many situations, however, only the first paragraph should have such a large initial capital letter. Make it so by doing the following:
1.
Download both the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] and the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] from the book's website.
>
>
2.
Edit the .storybody p:first-letter rule so that it looks like this:
.storybody p:first-child:first-letter<br />{ font-size: xx-large;<br />color: white;<br />background-color: black;<br />font-family: Verdana, sans-serif; }<br />
3.
Open this in your browser. How does it look? If you aren't using Internet Explorer for Windows, you should see that only the first paragraph has a large initial capital letter.
4.
How can you fix this to work in Internet Explorer? Recall the warning and work-around earlier this chapter.
5.
Edit your HTML and CSS file to add a class and a style rule that will make your initial capital letter Internet Explorer-proof.
./ ADD NAME=CH05LEV1SEC4.HTML
Summary
[wax ka badal]
The selector is the part of the CSS rule that designates the recipient of the styles defined in the style declaration. Type selectors can be used to style specific types of HTML elements, and class and id selectors choose them according to attribute values. The universal selector sets a style on all elements.
You create a descendant selector by combining two or more simple selectors together to show the hierarchy of the elements on the page. Using this technique, you can apply different styles to different sections of the page.
Pseudo-element and pseudo-class selectors let you select parts of the page that aren't otherwise distinguished in the HTML. Rules with :link and :visited pseudo-class selectors can be used to style hypertext links. The :lang() pseudo-class can add styles to text in specific languages. The :first-child, :first-letter, and :first-line selectors are used for text formatting.
./ ADD NAME=CH05LEV1SEC5.HTML
Workshop
[wax ka badal]
The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1a1 Q.]
Are there other selectors that aren't covered here?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1 A.]
Yes, and you'll learn about them in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], "Advanced Selectors." Some of these are not well supported by the browsers, however.
>
>
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2a2 Q.]
Can I string together as many selectors as I like?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2 A.]
Certainly. You aren't limited to just two items in a descendant selector, for example. You could write a rule with a selector like the following, if you wanted:
body div #content p.special a:visited { color: green; }<br />
Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1a1 1.]
Which of the following selectors means "select any tag that's both part of the class old and within a tag?"
# em.old p
- em.old, p
- p.old em
- p em.old
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2a2 2.]
What rules would you write to make all visited links red and all unvisited links lime, and to make both kinds of links display in Arial font?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3a3 3.]
Which pseudo-element or pseudo-class can't be duplicated by using a tag with an appropriate class set, and why?
# :first-child
- :first-line
- :first-letter
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1 1.]
The correct answer is (d), p em.old.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2 2.]
Here is one set of CSS rules to make unvisited links lime and visited links red, both in Arial font:
a:link { color: red; font-family: Arial, sans-serif; }<br />a:visited { color: lime; font-family: Arial, sans-serif; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3 3.]
The :first-line cannot be duplicated by the tag because the author of the web page doesn't know where the first line will end when displayed on the user's browser.
Exercise
In this hour, you saw several HTML pages and associated style sheets that used selectors to style the page. To further explore selectors, you can create additional style rules by selecting specific elements and styling them appropriately.
./ ADD NAME=CH06.HTML
, in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3]. The is also a descendant of the , as it's contained by both the and the , and they are all descendants of the <body> element.
Listing 5.3. Descendants in HTML
<!-- babe-5.3.html --><br /><html><br /><head><br /><title>Babe: Best Movie EVER</title><br /><style type="text/css"><br />/* add style rules here */<br /></style><br /></head><br /><body><br /><div class="header"><br /><h1>Movie Review: <cite>Babe</cite></h1><br /><p>A Mini-Review by Joe H. Moviefan</p><br /></div><br /><div class="opinion"><br /><h2>The Best Movie <em>EVER</em></h2><br /><p>The movie <cite>Babe</cite> was the best family<br />movie ever produced! This great movie featured<br />talking animals, a cantankerous old man, and<br />subtle-yet-Oscar-winning special effects -- who<br />could ask for more? The clever writing and<br />humorous touches make this all-ages movie great<br />for children while still very enjoyable by<br />adults. What a great movie!</p><br /></div><br /><div class="footer"><br /><p>What did you think? Mail me at<br /><a href="mailto:joe@example.com">Joe H.<br />Moviefan.com!</a></p><br /></div><br /></body><br /></html><br />
Descendant selectors define rules based on where a given tag appears within the page by combining together simple selectors, separated by spaces. For example, here's a rule to change the color of all tags contained within paragraphs:
p cite { color: white; background-color: black; }
You'll notice that I listed the outside tag first and then the inside. If you did it the other way around, you wouldn't match anything because no cite tags contain paragraph tags.
If this rule is added to the <style> element of the HTML page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3], the effect shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig02 Figure 5.2] is produced. Notice that the within the is not styled by this rule, only the inside the
element.
Figure 5.2. Firefox displays the second with the chosen style.
File:05fig02.jpg
It's important to keep in mind that a descendant selector means any descendant, not just an immediate child. A descendant could be an element inside an element inside an element. This enables you to make rules that apply to any descendant element, no matter how deeply it's nested.
You can combine section styles (set via class and ) with element-based type selectors, as well; for example, the following code changes the font face and colors of tags within the header section, but leaves the rest of the header aloneas well as the other paragraph tags that aren't contained by something with the .header class:
.header p { font-family: Verdana, sans-serif;
color: white; background-color: black; }
The effects of this rule are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig03 Figure 5.3].
Figure 5.3. Changing the header paragraph font style.
File:05fig03.jpg
A more complete style sheet that demonstrates how to set a number of different combined selectors is listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex04 Listing 5.4]. To use this with my movie review page, I'll add the following to the <head> of the page:
<link type="text/css" rel="stylesheet" href="babe-5.4.css">
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig04 Figure 5.4] shows how [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] looks with this style sheet applied.
Figure 5.4. Displaying various selectors with separate styles. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig04_alt.jpg [View full size image]]File:05fig04.jpg
Listing 5.4. A Variety of Selectors in a Single Style Sheet
/* babe-5.4.css: Style sheet for Babe review */<br />body<br />{ font-family: Arial, sans-serif;<br />color: black;<br />background-color: white; }<br />.header h1<br />{ font-family: "Courier New", monospace;<br />color: silver;<br />background-color: black; }<br />.header cite<br />{ font-family: Verdana, sans-serif;<br />background-color: silver;<br />color: black; }<br />.header p<br />{ font-family: Arial, monospace;<br />color: black;<br />font-size: x-large; }<br />.opinion h2<br />{ color: white;<br />background-color: navy;<br />font-family: Arial, sans-serif; }<br />em<br />{ font-size: larger; }<br />p cite<br />{ color: white;<br />background-color: black; }<br />.footer<br />{ font-family: "Times New Roman", serif;<br />font-size: small;<br />color: white;<br />background-color: gray; }<br />.footer a<br />{ color: white;<br />background-color: black; }<br />
Try it Yourself: Experimenting with Simple Selectors
Why not try out these selectors yourself? You can use the example HTML files from this chapter.
1.
Download either the accessibility tip in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] or the movie review in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] from the book's website.
2.
Open the HTML file in a browser and view it without styles.
3.
Create a style sheet. Add your own style rules based on the class and id attributes set in the HTML. Choose your own text colors, backgrounds, font sizes, and other properties.
4.
Link your style sheet to the HTML file with the <link> element and view it in a browser. Are they styled the way you wanted? If not, try again until you're satisfied.
5.
Add to the HTML filesrewrite the text, add more paragraphs, create new class and id attributes. Write new CSS rules based on these! Or even better, write your own pages from scratch and use your own content for testing out combined selectors.
./ ADD NAME=CH05LEV1SEC3.HTML
Pseudo-Classes and Pseudo-Elements
In addition to type selectors, id selectors, and class selectors, CSS also allows pseudo-class and pseudo-element selectors.
A pseudo-class selector is a selector based on a set of predefined qualities that an HTML element can possess. These qualities function in practice similar to a class attribute on the element, so in CSS terms, they are called pseudo-classes. No actual class attributes exist in the markup that corresponds to these pseudo-classes; instead, they represent some aspect of the element to which they're applied, or even the state of the browser's user interface relative to that element.
A pseudo-element selector identifies a virtual element, one that doesn't exist in the markup but can be deduced by the browser and used to apply a style. As with pseudo-classes, there is no markup that corresponds to the pseudo-element.
Simple Pseudo-Classes
The pseudo-classes in CSS are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table01 Table 5.1]. The :active, :focus, and :hover pseudo-classes are covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12], "Styling Links."
Pseudo-class
Selects
:active
Elements that have been activated (such as active links)
:first-child
The first child of an element
:focus
Elements that have focus (such as form fields receiving input)
:hover
Elements that are pointed at (such as by a mouse)
:lang()
Styles for a specific language
:link
Unfollowed links
:visited
Previously visited links
Pseudo-classes can stand alone in a style rule, as classes can, but most commonly they're used with elements as a type selector, as follows:
:link { color: red; }
a:link { color: red; }
Both these rules are valid; the former applies to any element that happens to be a link, whereas the latter rule covers only <a> tags. In practice, these are the same things in HTML: Only the <a> elements are links, and so the rules mean the same thing.
You can combine pseudo-classes with real classes or even other pseudo-classes by putting them together with no spaces between, just the . and : indicators. For example, here's HTML with class attributes set on links:
<a href="search.html" class="nav">
Search the Site
</a>
...
<a href="http://www.idyllmtn.com/" class="offsite">
Idyll Mountain Internet
</a>
Here are rules to work with each of those links; note that the order of the class and the pseudo-class doesn't matter:
a:link.nav { color: cyan; }
a.offsite:link { color: green; }
The :link and :visited Pseudo-Classes
In HTML, you can use attributes on the <body> tag to determine the colors of links:
<body link="red" visited="gray">
CSS gives the same functionality through pseudo-classes, and by combining pseudo-class selectors with class or id selectors, you can put different link colors on different parts of the page as you'll see later in this hour.
The :link pseudo-class is the equivalent of the <body> attribute link in HTML: It defines a style for links that have yet to be followed. You usually set these on the <a> tag because <a> is the only visible linking element in HTML. Here's an example CSS rule using :link:
a:link { color: red; }
Visited links are those that the user has already been to; the browser keeps track of a list of visited URLs and colors them differently. The :visited pseudo-class is used to write rules applying to those types of links, as follows:
a:visited { color: gray; }
The :link and :visited pseudo-selectors are mutually exclusive; a given link is either one or the other at any given time and can't be both at once. However, you can write a rule that applies to both, such as
a:link,
a:visited { color: blue; }
Watch Out!
Note that changing the :link and :visited colors to the same value can cause problems for users! Most users expect links to change to some coloranything other than the original, although usually from blue to purpleafter they have been visited. Unless you've got a good reason for it, you'll probably want to supply different :link and :visited colors.
Unlike HTML, which lets you change only the colors of the links, CSS allows you to apply nearly any style to unvisited or visited links by using the :link and :visited pseudo-selectors. For example:
a:link { color: black;
background-color: lime;
font-family: Arial, sans-serif; }
a:visited { color: gray;
background-color: yellow;
font-family: "Times New Roman", serif; }
This puts your unvisited links in black text on a lime green background and puts the visited links in gray on a yellow background. Unvisited links are in Arial font, and visited links are in Times New Roman. Now, apart from an illustrative example, you never want to write rules like these; it doesn't make sense, for example, for the font face to change when you've clicked on a link and some of my color choices are just plain ugly. Background colors on links do help them stand out from rest of the page, though, and that's not such a bad thing. You'll learn more about the theory behind link styles in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12].
To color links differently on different sections of the page, combine :link and :visited pseudo-selectors with section classes in a descendant selector, like this:
#breadcrumb { background-color: black; color: white; }
#breadcrumb a:link { color: cyan; font-size: large; }
#breadcrumb a:visited { font-size: small; color: fuchsia; }
This creates a black breadcrumb trail with unvisited links in large cyan letters (bright blue) and visited links in smaller, fuchsia (bright purple). If you add these styles to the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex02 Listing 5.2], the accessibility tip page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] will look like the page shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig05 Figure 5.5].
Figure 5.5. Pseudo-class selectors coloring links on a page. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig05_alt.jpg [View full size image]]File:05fig05.jpg
The :first-child Pseudo-Class
The :first-child pseudo-class is used to select an element that's the first child of another element. The first child is the first tag within some other element; if the first child matches the base type of the selectorthe part before the :first-child pseudo-classthen the rule applies to that element.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] shows the start of a short story. The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] sets the first paragraph of the story to be larger than the rest, as well as gives it a silver background. The results are displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig06 Figure 5.6].
Listing 5.5. A Few Paragraphs in HTML
<!-- story-5.5.html --><br /><html><br /><head><br /><title>Fortune of Reversal</title><br /><link type="text/css" rel="stylesheet"<br />href="story-5.7.css"><br /></head><br /><body><br /><h1 id="storytitle">Fortune of Reversal</h1><br /><div class="storybody"><br /><p>They dined on heaping platters of Szechuan chicken, of<br />spicy beef, of shrimp and vegetables in some exotic dish<br />without a name. Bits of food were passed from chopsticks<br />to chopsticks, violating all known laws of Chinese<br />cuisine etiquette. The tea flowed hot and fast that night,<br />until the meal finally concluded itself.</p><br /><p>"Thank you for dining here tonight," said the badgeless,<br />anonymous waitress. She placed a small tray containing the<br />check and two wrapped fortune cookies on the edge of the<br />table, and hefted the empty plates one by one, forming a<br />stack on the crook of her elbow.</p><br /><p>"Absolutely delicious," declared Oliver as he pulled a card<br />from his wallet and flicked it onto the bill. He picked up<br />the two cookies, an afterthought. "Fortune cookie, my<br />love?" he asked Amanda.</p><br /></div><br /></body><br /></html><br />
Listing 5.6. A Style Sheet Using :first-child Pseudo-Class Selector
/* story-5.6.css */<br /><br />#storytitle<br />{ font-family: Verdana; }<br /><br />.storybody p<br />{ font-family: Arial; }<br /><br />.storybody p:first-child<br />{ font-size: x-large;<br />background-color: silver; }<br />
Figure 5.6. Firefox uses the :first-child selector to style the first paragraph.
File:05fig06.jpg
Watch Out!
Internet Explorer for Windows does not support the :first-child pseudo-element; rules with such selectors are ignored. For maximum compatibility, set a class attribute manually on your first child elements, such as class="firstone", and then include that class as an additional selector in your rule. For example:
.storybody p:first-child, .storybody p.firstone
{ font-size: large; }
Of course, by doing so you've made the first half of the selector redundantthe other browsers understand the class-based workaround! So you may want to drop the use of :first-child entirely if you're going to add this workaround.
The :lang() Pseudo-Class
On the Web, languages are indicated by a two-letter code, sometimes followed by a dash and an additional country code for regional versions of a language. Some of these languages are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table02 Table 5.2]; for a complete list, see the book's website.
Code
Language
de
German
en
English
en-ca
Canadian English
en-uk
British English
en-us
American English
fr
French
jp
Japanese
ru
Russian
The choice of language can dictate a number of factors, including the direction of the text, the fonts used, or even the dictionary for pronunciation used by a screen reader. The CSS language doesn't allow you to set the language, which must be done in the HTML or in an HTTP header, but it does let you create rules or style sheets that apply to only certain languages.
To set the language within an HTML document, you simply have to use the lang attribute on the <html> tag. Sections of a second language embedded within the document can be indicated with the lang attribute on a or any other appropriate HTML element, such as or
.
The CSS specification defines a special pseudo-class, :lang(), for indicating rules that should be applied only to elements that match a certain language. Such a rule is written like the following:
:lang(en-uk) { background-color: #CCCCFF; }
This would display anything written in British English with a light blue background color. How does the browser know which parts of the text are written in British English? It needs to be set in the HTML, as in the following:
<p>He cried out in a bad Monty Python imitation,
<span lang="en-uk">He's pinin' for the fjords!</span>
</p>
By itself, :lang() is not particularly useful, but when combined with other CSS rules and properties, it can be quite powerful.
Pseudo-Elements in CSS
Cascading Style Sheets defines four pseudo-elementsvirtual elements created from their content in the document in relationship to a base element. These are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table03 Table 5.3]. The pseudo-elements :before and :after are used to insert generated content and are discussed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch23.html#ch23 Hour 23], "User Interface and Generated Content."
Pseudo-Element
Selects
:before
Inserts something before an element
:after
Inserts something after an element
:first-letter
The first letter of a block element
:first-line
The first line of a block element
The pseudo-elements :first-line and :first-letter select portions of another element, and these portions operate as if they were separate inline elements; however, only certain properties can be applied to these pseudo-elements, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table04 Table 5.4].
Property or Category
:first-line
:first-letter
Hour Covered
Background properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch11.html#ch11 Hour 11]
Border properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
Color properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
Font properties
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch09.html#ch09 Hour 9]
Margin properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
Padding properties
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]
clear
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
float
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
letter-spacing
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
line-height
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-decoration
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-shadow
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
text-TRansform
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
vertical-align
yes
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]
word-spacing
yes
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10]
The :first-line Pseudo-Element
The :first-line pseudo-element is a virtual element used to identify the first line of an element for adding specific styles that apply to only the first line. For example, you might want to put the first line of a news story in larger print to make it stand out. Such a rule would look like this:
p:first-line { font-size: large; }
A :first-line pseudo-element creates a fictional tag set that is similar to a or another inline element but whose content is determined when the page is rendered. As much as will fit on one line is included in the fictional tag. This will vary depending on the size of the user's browser window, the font size, and other factors, so there's no way to calculate it beforehand. This means that there aren't any viable workarounds for browsers that don't support :first-line because there's no way to know what will fit on one line. Fortunately, the current versions of modern browsers support :first-line.
The :first-letter Pseudo-Element
A :first-letter selector also references one of those imaginary, generated elements that doesn't appear in the source code but can be referenced by CSS rules. In this case, the imaginary tag is one surrounding the first letter of the element. The most common use for this is creating an initial capital letter that's larger than surrounding text.
Here's an example of a style sheet that uses both :first-letter and :first-line:
/* story-5.7.css */
#storytitle
{ font-family: Verdana, sans-serif; }
.storybody p
{ font-family: Arial, sans-serif; }
.storybody p:first-line
{ background-color: silver; }
.storybody p:first-letter
{ font-size: xx-large;
color: white;
background-color: black;
font-family: Verdana, sans-serif; }
The result of applying this style sheet to the story sample from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7].
Figure 5.7. A large initial capital letter styled by a :first-letter rule. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig07_alt.jpg [View full size image]]File:05fig07.jpg
Try it Yourself: Using :first-letter with :first-child
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7], each paragraph begins with a large capital letter, white on a black background. In many situations, however, only the first paragraph should have such a large initial capital letter. Make it so by doing the following:
1.
Download both the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] and the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] from the book's website.
>
>
2.
Edit the .storybody p:first-letter rule so that it looks like this:
.storybody p:first-child:first-letter<br />{ font-size: xx-large;<br />color: white;<br />background-color: black;<br />font-family: Verdana, sans-serif; }<br />
3.
Open this in your browser. How does it look? If you aren't using Internet Explorer for Windows, you should see that only the first paragraph has a large initial capital letter.
4.
How can you fix this to work in Internet Explorer? Recall the warning and work-around earlier this chapter.
5.
Edit your HTML and CSS file to add a class and a style rule that will make your initial capital letter Internet Explorer-proof.
./ ADD NAME=CH05LEV1SEC4.HTML
Summary
[wax ka badal]
The selector is the part of the CSS rule that designates the recipient of the styles defined in the style declaration. Type selectors can be used to style specific types of HTML elements, and class and id selectors choose them according to attribute values. The universal selector sets a style on all elements.
You create a descendant selector by combining two or more simple selectors together to show the hierarchy of the elements on the page. Using this technique, you can apply different styles to different sections of the page.
Pseudo-element and pseudo-class selectors let you select parts of the page that aren't otherwise distinguished in the HTML. Rules with :link and :visited pseudo-class selectors can be used to style hypertext links. The :lang() pseudo-class can add styles to text in specific languages. The :first-child, :first-letter, and :first-line selectors are used for text formatting.
./ ADD NAME=CH05LEV1SEC5.HTML
Workshop
[wax ka badal]
The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1a1 Q.]
Are there other selectors that aren't covered here?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1 A.]
Yes, and you'll learn about them in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], "Advanced Selectors." Some of these are not well supported by the browsers, however.
>
>
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2a2 Q.]
Can I string together as many selectors as I like?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2 A.]
Certainly. You aren't limited to just two items in a descendant selector, for example. You could write a rule with a selector like the following, if you wanted:
body div #content p.special a:visited { color: green; }<br />
Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1a1 1.]
Which of the following selectors means "select any tag that's both part of the class old and within a tag?"
# em.old p
- em.old, p
- p.old em
- p em.old
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2a2 2.]
What rules would you write to make all visited links red and all unvisited links lime, and to make both kinds of links display in Arial font?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3a3 3.]
Which pseudo-element or pseudo-class can't be duplicated by using a tag with an appropriate class set, and why?
# :first-child
- :first-line
- :first-letter
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1 1.]
The correct answer is (d), p em.old.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2 2.]
Here is one set of CSS rules to make unvisited links lime and visited links red, both in Arial font:
a:link { color: red; font-family: Arial, sans-serif; }<br />a:visited { color: lime; font-family: Arial, sans-serif; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3 3.]
The :first-line cannot be duplicated by the tag because the author of the web page doesn't know where the first line will end when displayed on the user's browser.
Exercise
In this hour, you saw several HTML pages and associated style sheets that used selectors to style the page. To further explore selectors, you can create additional style rules by selecting specific elements and styling them appropriately.
./ ADD NAME=CH06.HTML
, and they are all descendants of the <body> element.
Listing 5.3. Descendants in HTML
<!-- babe-5.3.html --><br /><html><br /><head><br /><title>Babe: Best Movie EVER</title><br /><style type="text/css"><br />/* add style rules here */<br /></style><br /></head><br /><body><br /><div class="header"><br /><h1>Movie Review: <cite>Babe</cite></h1><br /><p>A Mini-Review by Joe H. Moviefan</p><br /></div><br /><div class="opinion"><br /><h2>The Best Movie <em>EVER</em></h2><br /><p>The movie <cite>Babe</cite> was the best family<br />movie ever produced! This great movie featured<br />talking animals, a cantankerous old man, and<br />subtle-yet-Oscar-winning special effects -- who<br />could ask for more? The clever writing and<br />humorous touches make this all-ages movie great<br />for children while still very enjoyable by<br />adults. What a great movie!</p><br /></div><br /><div class="footer"><br /><p>What did you think? Mail me at<br /><a href="mailto:joe@example.com">Joe H.<br />Moviefan.com!</a></p><br /></div><br /></body><br /></html><br /> |
Descendant selectors define rules based on where a given tag appears within the page by combining together simple selectors, separated by spaces. For example, here's a rule to change the color of all tags contained within paragraphs:
p cite { color: white; background-color: black; }
You'll notice that I listed the outside tag first and then the inside. If you did it the other way around, you wouldn't match anything because no cite tags contain paragraph tags.
If this rule is added to the <style> element of the HTML page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3], the effect shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig02 Figure 5.2] is produced. Notice that the within theis not styled by this rule, only the inside the
element.
File:05fig02.jpg
It's important to keep in mind that a descendant selector means any descendant, not just an immediate child. A descendant could be an element inside an element inside an element. This enables you to make rules that apply to any descendant element, no matter how deeply it's nested.
You can combine section styles (set via class andtags within the header section, but leaves the rest of the header aloneas well as the other paragraph tags that aren't contained by something with the .header class:
.header p { font-family: Verdana, sans-serif;
color: white; background-color: black; }
The effects of this rule are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig03 Figure 5.3].
File:05fig03.jpg
A more complete style sheet that demonstrates how to set a number of different combined selectors is listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex04 Listing 5.4]. To use this with my movie review page, I'll add the following to the <head> of the page:
<link type="text/css" rel="stylesheet" href="babe-5.4.css">
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig04 Figure 5.4] shows how [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex03 Listing 5.3] looks with this style sheet applied.
Listing 5.4. A Variety of Selectors in a Single Style Sheet
/* babe-5.4.css: Style sheet for Babe review */<br />body<br />{ font-family: Arial, sans-serif;<br />color: black;<br />background-color: white; }<br />.header h1<br />{ font-family: "Courier New", monospace;<br />color: silver;<br />background-color: black; }<br />.header cite<br />{ font-family: Verdana, sans-serif;<br />background-color: silver;<br />color: black; }<br />.header p<br />{ font-family: Arial, monospace;<br />color: black;<br />font-size: x-large; }<br />.opinion h2<br />{ color: white;<br />background-color: navy;<br />font-family: Arial, sans-serif; }<br />em<br />{ font-size: larger; }<br />p cite<br />{ color: white;<br />background-color: black; }<br />.footer<br />{ font-family: "Times New Roman", serif;<br />font-size: small;<br />color: white;<br />background-color: gray; }<br />.footer a<br />{ color: white;<br />background-color: black; }<br /> |
| Try it Yourself: Experimenting with Simple Selectors
Why not try out these selectors yourself? You can use the example HTML files from this chapter.
|
./ ADD NAME=CH05LEV1SEC3.HTML
Pseudo-Classes and Pseudo-Elements
In addition to type selectors, id selectors, and class selectors, CSS also allows pseudo-class and pseudo-element selectors.
A pseudo-class selector is a selector based on a set of predefined qualities that an HTML element can possess. These qualities function in practice similar to a class attribute on the element, so in CSS terms, they are called pseudo-classes. No actual class attributes exist in the markup that corresponds to these pseudo-classes; instead, they represent some aspect of the element to which they're applied, or even the state of the browser's user interface relative to that element.
A pseudo-element selector identifies a virtual element, one that doesn't exist in the markup but can be deduced by the browser and used to apply a style. As with pseudo-classes, there is no markup that corresponds to the pseudo-element.
Simple Pseudo-Classes
The pseudo-classes in CSS are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table01 Table 5.1]. The :active, :focus, and :hover pseudo-classes are covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12], "Styling Links."
| Pseudo-class | Selects |
| :active | Elements that have been activated (such as active links) |
| :first-child | The first child of an element |
| :focus | Elements that have focus (such as form fields receiving input) |
| :hover | Elements that are pointed at (such as by a mouse) |
| :lang() | Styles for a specific language |
| :link | Unfollowed links |
| :visited | Previously visited links |
Pseudo-classes can stand alone in a style rule, as classes can, but most commonly they're used with elements as a type selector, as follows:
:link { color: red; }
a:link { color: red; }
Both these rules are valid; the former applies to any element that happens to be a link, whereas the latter rule covers only <a> tags. In practice, these are the same things in HTML: Only the <a> elements are links, and so the rules mean the same thing.
You can combine pseudo-classes with real classes or even other pseudo-classes by putting them together with no spaces between, just the . and : indicators. For example, here's HTML with class attributes set on links:
<a href="search.html" class="nav"> Search the Site </a> ... <a href="http://www.idyllmtn.com/" class="offsite"> Idyll Mountain Internet </a>
Here are rules to work with each of those links; note that the order of the class and the pseudo-class doesn't matter:
a:link.nav { color: cyan; }
a.offsite:link { color: green; }
The :link and :visited Pseudo-Classes
In HTML, you can use attributes on the <body> tag to determine the colors of links:
<body link="red" visited="gray">
CSS gives the same functionality through pseudo-classes, and by combining pseudo-class selectors with class or id selectors, you can put different link colors on different parts of the page as you'll see later in this hour.
The :link pseudo-class is the equivalent of the <body> attribute link in HTML: It defines a style for links that have yet to be followed. You usually set these on the <a> tag because <a> is the only visible linking element in HTML. Here's an example CSS rule using :link:
a:link { color: red; }
Visited links are those that the user has already been to; the browser keeps track of a list of visited URLs and colors them differently. The :visited pseudo-class is used to write rules applying to those types of links, as follows:
a:visited { color: gray; }
The :link and :visited pseudo-selectors are mutually exclusive; a given link is either one or the other at any given time and can't be both at once. However, you can write a rule that applies to both, such as
a:link,
a:visited { color: blue; }
Unlike HTML, which lets you change only the colors of the links, CSS allows you to apply nearly any style to unvisited or visited links by using the :link and :visited pseudo-selectors. For example:
a:link { color: black;
background-color: lime;
font-family: Arial, sans-serif; }
a:visited { color: gray;
background-color: yellow;
font-family: "Times New Roman", serif; }
This puts your unvisited links in black text on a lime green background and puts the visited links in gray on a yellow background. Unvisited links are in Arial font, and visited links are in Times New Roman. Now, apart from an illustrative example, you never want to write rules like these; it doesn't make sense, for example, for the font face to change when you've clicked on a link and some of my color choices are just plain ugly. Background colors on links do help them stand out from rest of the page, though, and that's not such a bad thing. You'll learn more about the theory behind link styles in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12].
To color links differently on different sections of the page, combine :link and :visited pseudo-selectors with section classes in a descendant selector, like this:
#breadcrumb { background-color: black; color: white; }
#breadcrumb a:link { color: cyan; font-size: large; }
#breadcrumb a:visited { font-size: small; color: fuchsia; }
This creates a black breadcrumb trail with unvisited links in large cyan letters (bright blue) and visited links in smaller, fuchsia (bright purple). If you add these styles to the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex02 Listing 5.2], the accessibility tip page from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05lev1sec1.html#ch05ex01 Listing 5.1] will look like the page shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig05 Figure 5.5].
The :first-child Pseudo-Class
The :first-child pseudo-class is used to select an element that's the first child of another element. The first child is the first tag within some other element; if the first child matches the base type of the selectorthe part before the :first-child pseudo-classthen the rule applies to that element.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] shows the start of a short story. The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex06 Listing 5.6] sets the first paragraph of the story to be larger than the rest, as well as gives it a silver background. The results are displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig06 Figure 5.6].
Listing 5.5. A Few Paragraphs in HTML
<!-- story-5.5.html --><br /><html><br /><head><br /><title>Fortune of Reversal</title><br /><link type="text/css" rel="stylesheet"<br />href="story-5.7.css"><br /></head><br /><body><br /><h1 id="storytitle">Fortune of Reversal</h1><br /><div class="storybody"><br /><p>They dined on heaping platters of Szechuan chicken, of<br />spicy beef, of shrimp and vegetables in some exotic dish<br />without a name. Bits of food were passed from chopsticks<br />to chopsticks, violating all known laws of Chinese<br />cuisine etiquette. The tea flowed hot and fast that night,<br />until the meal finally concluded itself.</p><br /><p>"Thank you for dining here tonight," said the badgeless,<br />anonymous waitress. She placed a small tray containing the<br />check and two wrapped fortune cookies on the edge of the<br />table, and hefted the empty plates one by one, forming a<br />stack on the crook of her elbow.</p><br /><p>"Absolutely delicious," declared Oliver as he pulled a card<br />from his wallet and flicked it onto the bill. He picked up<br />the two cookies, an afterthought. "Fortune cookie, my<br />love?" he asked Amanda.</p><br /></div><br /></body><br /></html><br /> |
Listing 5.6. A Style Sheet Using :first-child Pseudo-Class Selector
/* story-5.6.css */<br /><br />#storytitle<br />{ font-family: Verdana; }<br /><br />.storybody p<br />{ font-family: Arial; }<br /><br />.storybody p:first-child<br />{ font-size: x-large;<br />background-color: silver; }<br /> |
File:05fig06.jpg
Internet Explorer for Windows does not support the :first-child pseudo-element; rules with such selectors are ignored. For maximum compatibility, set a class attribute manually on your first child elements, such as class="firstone", and then include that class as an additional selector in your rule. For example:
.storybody p:first-child, .storybody p.firstone
{ font-size: large; }
The :lang() Pseudo-Class
On the Web, languages are indicated by a two-letter code, sometimes followed by a dash and an additional country code for regional versions of a language. Some of these languages are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table02 Table 5.2]; for a complete list, see the book's website.
| Code | Language |
| de | German |
| en | English |
| en-ca | Canadian English |
| en-uk | British English |
| en-us | American English |
| fr | French |
| jp | Japanese |
| ru | Russian |
The choice of language can dictate a number of factors, including the direction of the text, the fonts used, or even the dictionary for pronunciation used by a screen reader. The CSS language doesn't allow you to set the language, which must be done in the HTML or in an HTTP header, but it does let you create rules or style sheets that apply to only certain languages.
To set the language within an HTML document, you simply have to use the lang attribute on the <html> tag. Sections of a second language embedded within the document can be indicated with the lang attribute on a or any other appropriate HTML element, such asor
.The CSS specification defines a special pseudo-class, :lang(), for indicating rules that should be applied only to elements that match a certain language. Such a rule is written like the following:
:lang(en-uk) { background-color: #CCCCFF; }This would display anything written in British English with a light blue background color. How does the browser know which parts of the text are written in British English? It needs to be set in the HTML, as in the following:
<p>He cried out in a bad Monty Python imitation, <span lang="en-uk">He's pinin' for the fjords!</span> </p>By itself, :lang() is not particularly useful, but when combined with other CSS rules and properties, it can be quite powerful.
Pseudo-Elements in CSS
Cascading Style Sheets defines four pseudo-elementsvirtual elements created from their content in the document in relationship to a base element. These are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table03 Table 5.3]. The pseudo-elements :before and :after are used to insert generated content and are discussed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch23.html#ch23 Hour 23], "User Interface and Generated Content."
Pseudo-Element Selects :before Inserts something before an element :after Inserts something after an element :first-letter The first letter of a block element :first-line The first line of a block element The pseudo-elements :first-line and :first-letter select portions of another element, and these portions operate as if they were separate inline elements; however, only certain properties can be applied to these pseudo-elements, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05table04 Table 5.4].
Property or Category :first-line :first-letter Hour Covered Background properties yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch11.html#ch11 Hour 11] Border properties yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16] Color properties yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] Font properties yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch09.html#ch09 Hour 9] Margin properties yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16] Padding properties yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16] clear yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15] float yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15] letter-spacing yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] line-height yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] text-decoration yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] text-shadow yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] text-TRansform yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] vertical-align yes yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15] word-spacing yes [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10] The :first-line Pseudo-Element
The :first-line pseudo-element is a virtual element used to identify the first line of an element for adding specific styles that apply to only the first line. For example, you might want to put the first line of a news story in larger print to make it stand out. Such a rule would look like this:
p:first-line { font-size: large; }A :first-line pseudo-element creates a fictional tag set that is similar to a or another inline element but whose content is determined when the page is rendered. As much as will fit on one line is included in the fictional tag. This will vary depending on the size of the user's browser window, the font size, and other factors, so there's no way to calculate it beforehand. This means that there aren't any viable workarounds for browsers that don't support :first-line because there's no way to know what will fit on one line. Fortunately, the current versions of modern browsers support :first-line.
The :first-letter Pseudo-Element
A :first-letter selector also references one of those imaginary, generated elements that doesn't appear in the source code but can be referenced by CSS rules. In this case, the imaginary tag is one surrounding the first letter of the element. The most common use for this is creating an initial capital letter that's larger than surrounding text.
Here's an example of a style sheet that uses both :first-letter and :first-line:
/* story-5.7.css */ #storytitle { font-family: Verdana, sans-serif; } .storybody p { font-family: Arial, sans-serif; } .storybody p:first-line { background-color: silver; } .storybody p:first-letter { font-size: xx-large; color: white; background-color: black; font-family: Verdana, sans-serif; }The result of applying this style sheet to the story sample from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05ex05 Listing 5.5] can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7].
Figure 5.7. A large initial capital letter styled by a :first-letter rule. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/05fig07_alt.jpg [View full size image]]File:05fig07.jpg
Try it Yourself: Using :first-letter with :first-child In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05fig07 Figure 5.7], each paragraph begins with a large capital letter, white on a black background. In many situations, however, only the first paragraph should have such a large initial capital letter. Make it so by doing the following:
> > .storybody p:first-child:first-letter<br />{ font-size: xx-large;<br />color: white;<br />background-color: black;<br />font-family: Verdana, sans-serif; }<br />./ ADD NAME=CH05LEV1SEC4.HTML
Summary
[wax ka badal]The selector is the part of the CSS rule that designates the recipient of the styles defined in the style declaration. Type selectors can be used to style specific types of HTML elements, and class and id selectors choose them according to attribute values. The universal selector sets a style on all elements.
You create a descendant selector by combining two or more simple selectors together to show the hierarchy of the elements on the page. Using this technique, you can apply different styles to different sections of the page.
Pseudo-element and pseudo-class selectors let you select parts of the page that aren't otherwise distinguished in the HTML. Rules with :link and :visited pseudo-class selectors can be used to style hypertext links. The :lang() pseudo-class can add styles to text in specific languages. The :first-child, :first-letter, and :first-line selectors are used for text formatting.
./ ADD NAME=CH05LEV1SEC5.HTML
Workshop
[wax ka badal]The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1a1 Q.] Are there other selectors that aren't covered here? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q1 A.] Yes, and you'll learn about them in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], "Advanced Selectors." Some of these are not well supported by the browsers, however. > > [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2a2 Q.] Can I string together as many selectors as I like? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa1q2 A.] Certainly. You aren't limited to just two items in a descendant selector, for example. You could write a rule with a selector like the following, if you wanted: body div #content p.special a:visited { color: green; }<br />
Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1a1 1.] Which of the following selectors means "select any tag that's both part of the class old and within a tag?"
#em.old p
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2a2 2.] What rules would you write to make all visited links red and all unvisited links lime, and to make both kinds of links display in Arial font? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3a3 3.] Which pseudo-element or pseudo-class can't be duplicated by using a tag with an appropriate class set, and why? #:first-child
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q1 1.] The correct answer is (d), p em.old. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q2 2.] Here is one set of CSS rules to make unvisited links lime and visited links red, both in Arial font: a:link { color: red; font-family: Arial, sans-serif; }<br />a:visited { color: lime; font-family: Arial, sans-serif; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch05qa2q3 3.] The :first-line cannot be duplicated by the tag because the author of the web page doesn't know where the first line will end when displayed on the user's browser. Exercise
In this hour, you saw several HTML pages and associated style sheets that used selectors to style the page. To further explore selectors, you can create additional style rules by selecting specific elements and styling them appropriately.
./ ADD NAME=CH06.HTML
