Selective Styling in CSS3
- The Element Family Tree
- Defining Styles Based on Context
- Working with Pseudo-classes
- Working with Pseudo-elements
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Inheriting Properties from a Parent
- Making a Declaration !important
- Determining the Cascade Order
- Putting It All Together
This chapter is from the book
This chapter is from the book
This chapter is from the book
In This Chapter
The Element Family Tree 70
Defining Styles Based on Context 71
Working with Pseudo-classes 80
Working with Pseudo-elements 92
Defining Styles Based on Tag Attributes 96
NEW IN CSS3: Querying the Media 
100
Inheriting Properties from a Parent 109
Making a Declaration !important 111
Determining the Cascade Order 113
Putting It All Together pageref 116
It’s not enough to style a Web page element. The art of CSS—and thus the art of Web design—is the ability to style elements based on their context. You must consider where an element is in the document; which elements surround it; its attributes, content, and dynamic state; and even the platform displaying the element (screen, handheld device, TV, and so on).
Selective styling is the closest that CSS gets to traditional computer programming, allowing you to style elements if they meet certain criteria. This level of styling can get increasingly complex, so it’s important, at least in this chapter, to start out as simply as possible and build a firm foundation of understanding.
The Element Family Tree
When a tag is surrounded by another tag—one inside another—the tags are nested.
<h2><strong>Chapter 2</strong> The Pool of Tears<h2>
In a nested set, the outer element in this example (<h2>) is called the parent, and the inner element (<strong>) is the child. The child tag and any children of that child tag are the parents’ descendents. Two tags in the same parent are called siblings, and two tags immediately next to each other are adjacent siblings 
.
- Parent elements contain other elements (children). Child elements will often inherit styles from a parent element.
- Descendent elements are any elements within another element.
- Child elements are first generation descendent elements in relation to the parent. Second generation and higher elements are sometimes referred to as grandchildren.
- Adjacent or preceding sibling elements are child elements of the same generation that are immediately next to each other in the HTML code.
)
In Chapter 3, you learned ways to specify the styles of an individual element regardless of where it is placed in the HTML code. However, CSS also lets you specify the element’s style depending on its context. Using contextual selectors, you can specify styles based on a tag’s relationship to other tags, classes, or IDs on the page.