Releasing CSS

Figure 10. The effect of the child selector rule

To see which elements are affected by this CSS rule in an organizational chart, see

Figure 11.

Releasing CSS 13

Figure 11. The child selector highlighted in the markup structure

Adjacent Sibling Selectors

Adjacent siblings describe the relationship between two elements that are placed

side-by-side within the flow of a web page’s markup.

An adjacent sibling is signified by the plus sign (+), as shown next:

li + li {

font-size: 200%;

}

In Figure 12, you can see the effect of the adjacent sibling selectors in a web page.

The last two list items are styled since the CSS rules require that a list item element

be placed immediately before another list item element in order for it to be applied.

Releasing CSS 14

Figure 12. Adjacent sibling selectors only affect the ordered list, because it

appears after the unordered list

In Figure 13, you can see how the elements are picked in the page’s structure.

Releasing CSS 15

Figure 13. The elements being styled by the adjacent sibling selector

Attribute Selectors

Attribute selectors have four options for finding an element that has a matching

attribute. Each is followed by an example.

[attribute] searches for matches based on the attribute.

a[href] {

text-decoration: none;

}

Whenever the href attribute appears within an element in the HTML, the link

won’t have an underline.

[attribute=val] searches for matches based on the value.

a[href="http://csscookbook.com"] {

text-decoration: none;

}

Whenever a link that points to the csscookbook.com web site appears in the

HTML, the link won’t have an underline.

[attribute~=val] searches for matches that contain the space-separated

word somewhere in the value.

a[title~="digital"] {

text-decoration: none;

}

Whenever “digital” appears in the title attribute of an anchor element, the link

won’t have an underline.

Releasing CSS 16

[attribute|=val] searches for matches that contain the attribute with a

hyphen.

a[href|="digital"] {

text-decoration: none;

}

Whenever “digital-” appears in the href attribute of an anchor element, the link

won’t have an underline.

Missing Native PNG Support

Graphics Interchange Format (GIF) images only offer on/off opacity for any given

pixel, whereas Portable Network Graphic (PNG) images offer a wider array of

transparency in the pixels.

The PNG image format allows for alpha transparency, or 254 levels of opacity (see

http://www.libpng.org/pub/png/pngs-img.html), as shown in Figure 14.

Releasing CSS 17