Section 3.7. Advanced Selectors | Dreamweaver CS3: The Missing Manual

3.7. Advanced Selectors

The CSS 2 guidelines provide a few more powerful selectors that give you even finer control over Web page styling. Like some of the selectors you've seen previously, the selectors in this section don't work in Windows Internet Explorer 6 and earlier. (But you can try the JavaScript workaround in the box in Section 3.6.2.4.)

3.7.1. Child Selectors

Similar to the descendent selectors described earlier in this chapter, CSS lets you format the children of another tag with a child selector. The child selector uses an additional symbolan angle bracket (>) to indicate the relationship between the two elements. For example, the selector body > h1 selects any <h1> tag that's a child of the <body> tag.

Unlike a descendent selector, which applies to all descendents of a tag (children, grandchildren, and so on), the child selector lets you specify which child of which parent you mean. For example, in Figure 3-6, there are two <h2> tags. Using a plain old descendent selector body h2 selects both <h2> tags. Even though both <h2> tags are inside of the <body> tag, though, only the second one is a child of the <body> tag. The first <h2> is directly inside of a <div> tag, so its parent is <div>. Since the two <h2> tags have different parents, you can use a child selector to get at them individually. To select only the second <h2> tag, your child selector looks like this: body > h2 . If you want the first <h2> tag, then you must use this child selector instead: div > h2 .

Figure 3-6. The diagram (right) shows the relationship between HTML tags (left).

FREQUENTLY ASKED QUESTION
Making Lists Look Great

When would I ever use a child selector? Just from reading this chapter, I already know enough selectors to get at just about any page element, so why learn another?

There's one design challenge where child selectors can't be beatand it comes up in more Web sites than you think. Any time you have an unordered list with one or more unordered lists nested inside (as in Figure 3-6), you can use child selectors to visually organize these categories and subcategories of information. You can format the first level of list items one way, and the second level of list items another way. Content presented in this manner looks neat, professional, and readable (and your visitors will love you for it).

First, create a class style for the outermost nested level in your list and call it, say, .mainList . For this top level, you might use a sans-serif font, a little larger than your other text, perhaps in bold or a different color . Subsequent categories can be smaller, in a serif font like Times for easiest reading. When you have a lot of text, styling each subcategory level a bit differently helps visually orient your visitors in the material.

Apply the .mainList class style to the first <ul> tag: < ul class="mainList ">. Then use a child selector ( ul.mainList > li ) to select just the first set of list items, and add your desired text styling for the first subcategory. This styling applies only to the <li> tags that are children of the <ul> tag with the .mainList style applied to it. The child <li> tags of any subsequent nested <ul> tags are unaffected, so you can style them independently with the proper child selectors. For example, to style the <li> tags of the first nested list, use this selector ul.mainList > li > ul > li . (A descendent selector like ul li , by contrast, selects the list items of all unordered lists on the pagenested ones and all.)

3.7.2. Adjacent Siblings

Parent-child relationships aren't the only ones in the HTML family tree. Sometimes you need to select a tag based not on its parent tag, but on its surrounding siblingsthe tags that share a common parent. A tag that appears immediately after another tag in HTML is called an adjacent sibling . In Figure 3-6, the <div> tag is the adjacent sibling of the <h1> tag, the <p> tag is the adjacent sibling of the <h2> tag, and so on.

Using an adjacent sibling selector, you can, for example, give the first paragraph after each heading different formatting from the paragraphs that follow. Suppose you want to remove the margin that appears above that <p> tag so that it sits right below the heading without any gap. Or perhaps you want to give the paragraph a distinct color and font size , like a little introductory statement.

The adjacent sibling selector uses a plus sign (+) to join one element to the next . So to select every paragraph following each <h2> tag, use this selector: h2 + p . The last element in the selector ( p , in this case) is what gets the formatting, but only when it's next to its brother <h2>.

3.7.3. Attribute Selectors

CSS provides a way to format a tag based on any attributes it has. For example, say you want to place borders around the images on your pagebut only around the important photos. You don't want to include your logo, buttons , and other little doodads that also have an <img> tag. Fortunately, you realize that you've given all the photos descriptions using the title attribute, which means you can use an attribute selector to identify just the important images.

Tip: The HTML title attribute's a great way to add tooltips (pop-up messages) to links and images on a page. It's also one way to inform search engines about the useful information on a Web page. Learn more about it at http://webdesign.about.com/od/htmltags/a/aa101005.htm.

With attribute selectors, you can single out tags that have a particular property. For example, here's how to select all <img> tags with a title attribute:

 img[title]

The first part of the selector is the name of the tag ( img ) while the attribute's name goes in brackets: [ title ].

CSS doesn't limit attribute selectors to tag names : You can combine them with classes, too. For example, .photo[title] selects every element with the .photo class style and an HTML title attribute.

To get more specific, you can select elements that not only share a particular attribute, but also have an exact value set for that attribute. For example, when you want to highlight links that point to a particular URL, create an eye-catching attribute selector, like so:

 a[href="   http://www.cosmofarmer.com   "]{ color:red; font-weight:bold; }

Adding a value to an attribute selector's very useful when working with forms. Many form elements have the same tag, even if they look and act differently. The checkbox, text box, Submit button, and other form fields all share the <input> tag. The type attribute's value is what gives the field its form and function. For example, < input type="text" > creates a text box, and < input type="checkbox" > creates a checkbox.

To select just text boxes in a form, for example, use this selector:

 input[type="text"]

Note: The CSS 3 guidelines promise even more variations on the attribute selector.