Learning Web Design, 6th Edition

Chapter 14. Selectors

14

Selectors

Plus External Style sheets

In this Chapter

Selector review

Attribute selectors

Pseudo-class selectors

Pseudo-element selectors

Linking to an external style sheet

Importing an external style sheet

Knowing how to use selectors strategically and efficiently to target content is a core web development skill. So far, the majority of the selectors we’ve been using call out target elements by name, whether it’s one element type in a document, a group of elements, or an element in relation to another. In this chapter, we’ll look at ways to select content based on other criteria, such as attributes and their values, how the user is interacting with the element, where it appears in the document tree, and more. We’ll also finally look at using external style sheets, which is by far the most common and recommended method for attaching styles to a document—I’ve saved the best for last!

Selectors You’ve Learned So Far

Before we dive in, let’s take a look at the selectors you should be comfortable using at this point. The capital letter “E” indicates an element name in the selector structure examples:

Element type selector

Matches the name of an element.

E {property: value;}

Grouped (compound) selectors

Matches all the elements in a comma-separated list.

E1, E2, E3 {property: value;}

Descendant selector combinator

Matches element E2 only if it is a descendant of element E1.

E1 E2 {property: value;}

Child selector combinator

Matches any element E2 ...