Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 155

Listing 5-21. An Attribute Selector Example with an Attribute

img[title] {
border-color: #ff0;
}

Attribute selectors can be used not only for attributes but also for attribute-attribute value pairs. For example,
a 10-pixel border can be added to all logo.png images within the web page with the CSS rule shown in Listing 5-22.

Listing 5-22. An Attribute Selector with an Attribute and an Attribute Value

img[src="logo.png"] {
border: 10px;
}

This applies to multiple instances of the markup in Listing 5-23 throughout the web page.

Listing 5-23. A Markup Code Where Listing 5-22 Is Applied

< img src="logo.png" alt="logo" />

Child Selectors
Child selectors select the right-hand element in the selector if and only if it is a direct child of the left-hand element.
The greater-than sign ( > ) is used between the child and the ancestor. Listing 5-24 shows an example.

Listing 5-24. Child Selector Example

td > a {
font-weight: bold;
}

This is applied to all hyperlinks within table data cells, such as in Listing 5-25, but does not affect hyperlinks in
general such as in Listing 5-26.

Listing 5-25. A Hyperlink Example for the Child Selector in Listing 5-24

<td><a href=" http://www.privatecloud.services " > Private Cloud Services </a></td>

Listing 5-26. The Child Selector Example Is Not Applied to Anchors That Are Not Children of a Data Cell

<a href=" http://www.domainregistrationwebhosting.com.au " > Domain registration </a>

■ Caution Child selectors are not supported in Internet explorer 6 and earlier.