Selective Styling in CSS3
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 82- Working with Pseudo-Elements 96
- Defining Styles Based on Tag Attributes 100
- Querying the Media 104
- Inheriting Properties from a Parent 115
- Making a Declaration !important 117
- Determining the Cascade Order 119
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.
The article element is the parent to the elements created by the paragraph, strong, and emphasis tags, which are its descendents. Only the paragraph tag is a direct child. The elements created by the emphasis and strong tags are the children of the paragraph tag, and each other’s siblings.
)
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.