لطفا منتظر باشید ...
HTML and CSS
By
Molly E. Holzschlag...............................................
Publisher: Addison Wesley ProfessionalPub Date: April 22, 2005ISBN: 0-13-185586-7
Pages: 336
Index
Styling Links Using Descendant Selectors
Of course, using a lot of classes means not only writing more CSS rules, but also adding numerous class attributes to th176. If you have a lot of content to style and you rely too much on classes, it'll result in what industry specialists refer to as "class-it is," the overuse of classes. You can avoid this by tapping into other kinds of selectors.
Elements can be uniquely identified using what's known as an
ID selector . These selectors start off with an octothorpe followed by a custom namevery similar to what you do when creating a class:
#id-name
NOTE
The difference between class and ID selectors is a critical one. Class selectors can be used as many times in a document as you desire, whereas an ID can be used only
once per document . Therefore, IDs are particularly useful when identifying unique divisions of a document, such as navigation, content, masthead, and footer. You'll see this at work a great deal in upcoming chapters, particularly when we get into CSS layouts.
After a division is identified, you can tap into
descendant selectors. These are selectors that select based on the defined parent element. First you use the selector for the parent, then a space, and then the element you want to pass the styles along to: #nav a. This declaration selects any child anchor of the parent element identified as nav. Example 10-5 shows this at work in the context of multiple linking.
Example 10-5. Multiple links using ID and descendant selectors
[View full width]
<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&l191 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: white; background-color: black;}
h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc; background-color: black;text-transform: lowercase;}
/* link defaults */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; text-decoration: underline;}
a:active {color: red;}
/* link styles for all descendant links of the example2 division */
#example2 {background-color: white; color: black;}
#example2 a {color: lime;}
#example2 a:link {color: lime;}
#example2 a:visited {color: red;}
#example2 a:hover {color: aqua; text-decoration: underline;}
#example2 a:active {color: fuchsia;}
</style>
</head>
<body>
<div id="example1">
<p>I married early, and was happy to find in my wife a disposition
not uncongenial with my
own. Observing my partiality for domestic pets, she lost no opportunity
of procuring those
of the <a >most</a> agreeable kind. We had birds, gold fish
, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>
<div id="example2">
<p>This latter was a <a >remarkably</a>
large and beautiful
animal, entirely black, and sagacious to an astonishing degree.
In speaking of his
intelligence, my wife, who at heart was not a little tinctured
with superstition, made
frequent allusion to the ancient popular notion,
which regarded all black cats as witches
point - and I mention the matter at
just now, to be remembered.</p>
</div>
</body>
</html>
In this case, two divisions have IDs. Because there are no link styles defined for the example1 division, those links will take the defaults. But because I've created link styles specifically for example2, those styles are then applied to all descendant links within that division (see Figure 10-8).
Figure 10-8. Applying multiple links using descendant selectors, which streamlines both the CSS and the markup by avoiding classitis.
[View full size image]
