Tài liệu CSS Mastery- P2 pdf

GETTING YOUR STYLES TO HIT THE TARGET

27

Pseudo-classes

There are instances where you may want to style an element based on something other than the

structure of the document—for instance, the state of a link or form element. This can be done

using a pseudo-class selector.

/* makes all unvisited links blue */

a:link {color:blue;}

/* makes all visited links green */

a:visited {color:green;}

/* makes links red when hovered or activated.

focus is added for keyboard support */

a:hover, a:focus, a:active {color:red;}

/* makes table rows red when hovered over */

tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */

input:focus {background-color:yellow;}

:link and :visited are known as link pseudo-classes and can only be applied to anchor

elements. :hover, :active, and :focus are known as dynamic pseudo-classes and can

theoretically be applied to any element. Most modern browsers support this functionality.

Unsurprisingly, IE 6 only pays attention to the :active and :hover pseudo-classes when applied

to an anchor link, and ignores :focus completely. IE7 supports :hover on arbitrary elements but

ignores :active and :focus.

Last, it’s worth pointing out that pseudo-classes can be strung together to create more complex

behaviors, such as styling the hover effect on visited links different from those on unvisited links.

/* makes all visited linkes olive on hover */

a:visited:hover {color:olive;}

The universal selector

The universal selector is possibly one of the most powerful and least used of all the selectors.

The universal selector acts like a wild card, matching all the available elements. Like wild cards in

other languages, the universal selector is denoted by an asterisk. The universal selector is often

used to style every element on a page. For instance, you can remove the default browser

padding and margin on every element using the following rule:

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

CHAPTER 2

28

* {

padding: 0;

margin: 0;

}

When combined with other selectors, the universal selector can be used to style all the

descendants of a particular element or skip a level of descendants. You will see how this can be

put to practical effect a little later in this chapter.

Advanced selectors

CSS 2.1 and CSS 3 have a number of other useful selectors. Unfortunately, while most modern

browsers support these advanced selectors, older browsers like IE 6 do not. Luckily, CSS was

created with backward compatibility in mind. If a browser doesn’t understand a selector, it ignores

the whole rule. That way, you can apply stylistic and usability embellishments in more modern

browsers and not worry about it causing problems in older browsers. Just remember to avoid

using these more advanced selectors for anything critical to the function or layout of your site.

Child and adjacent sibling selectors

The first of these advanced selectors is the child selector. Whereas a descendant selector will

select all the descendants of an element, a child selector only targets the element’s immediate

descendants, or children. In the following example, the list items in the outer list will be given a

custom icon while list items in the nested list will remain unaffected (see Figure 2-1):

#nav>li {

background: url(folder.png) no-repeat left top;

padding-left: 20px;

}

<ul id="nav">

<li><a href="/home/">Home</a></li>

<li><a href="/services/">Services</a>

<ul>

<li><a href="/services/design/">Design</a></li>

<li><a href="/services/development/">Development</a></li>

<li><a href="/services/consultancy/">Consultancy</a></li>

</ul>

</li>

<li><a href="/contact/">Contact Us</a></li>

</ul>

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

GETTING YOUR STYLES TO HIT THE TARGET

29

Figure 2-1. The child selector styles the children of the list but not its grandchildren.

The child selector is supported by IE 7 and above. However, there is a small bug in IE 7 that

causes problems if there are HTML comments between the parent and child.

It is possible to fake a child selector that works in IE 6 and below by using the universal selector.

To do this, you first apply to all of the descendants the style you want the children to have. You

then use the universal selector to override these styles on the children’s descendants. So to fake

the previous child selector example you would do this:

#nav li {

background: url(folder.png) no-repeat left top;

badding-left: 20px;

}

#nav li * {

background-image: none;

padding-left: 0;

}

Sometimes, you may want to style an element based on its proximity to another element. The

adjacent sibling selector allows you to target an element that is preceded by another element that

shares the same parent. Using the sibling selector, you could make the first paragraph following a

top-level heading bold, gray, and slightly larger than the subsequent paragraphs (see Figure 2-2):

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

CHAPTER 2

30

h2 + p {

font-size: 1.4em;

font-weight: bold;

color: #777;

}

<h2>Peru Celebrates Guinea Pig festival</h2>

<p>The guinea pig festival in Peru is a one day event to celebrate

these cute local animals. The festival included a fashion show where

animals are dressed up in various amusing costumes.</p>

<p>Guinea pigs can be fried, roasted, or served in a casserole. Around

65 million guinea pigs are eaten in Peru each year.</p>

Figure 2-2. The adjacent sibling selector can be used to style the first paragraph after a headline,

allowing you to do away with extraneous classes.

As with the child selector, this fails in IE 7 if comments appear between the elements you are

targeting.

Attribute selectors

As the name suggests, the attribute selector allows you to target an element based on the

existence of an attribute or the attribute’s value. This allows you to do some very interesting and

powerful things.

For example, when you hover over an element with a title attribute, most browsers will display a

tooltip. You can use this behavior to expand the meaning of things such as acronyms and

abbreviations:

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

GETTING YOUR STYLES TO HIT THE TARGET

31

<p>The term <acronym title="self-contained underwater breathing«

apparatus">SCUBA</acronym> is an acronym rather than an abbreviation«

as it is pronounced as a word.</p>

However, there is no way to tell that this extra information exists without hovering over the

element. To get around this problem, you can use the attribute selector to style acronym elements

with titles differently from other elements—in this case, by giving them a dotted bottom border.

You can provide more contextual information by changing the cursor from a pointer to a question

mark when the cursor hovers over the element, indicating that this element is different from most.

acronym[title] {

border-bottom: 1px dotted #999;

}

acronym[title]:hover, acronym[title]:focus {

cursor: help;

}

In addition to styling an element based on the existence of an attribute, you can apply styles

based on a particular value. For instance, sites that are linked to using a rel attribute of nofollow

gain no added ranking benefit from Google. The following rule displays an image next to such

links, possibly as a way of showing disapproval of the target site:

a[rel="nofollow"] {

background: url(nofollow.gif) no-repeat right center;

padding-right: 20px;

}

All modern browsers including IE 7 support these selectors. However, because IE 6 doesn’t

support attribute selectors, you could potentially use them to apply one style to IE 6 and a

different style to more capable browsers. For instance, Andy Clarke makes use of this technique

by presenting black and white version of his site to IE 6 (see Figure 2-3) and a color one to all

other browsers (see Figure 2-4).

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.