Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Selective Styling in CSS3

  • Print
  • + Share This
  • 💬 Discuss
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 Jason Cranford Teague starts as simply as possible to help you build a firm foundation of understanding.

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 circle-a.jpg.

  • 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.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus