HTML & CSS Essentials For Dummies

Chapter 10

Ten Must-Memorize CSS Selectors

IN THIS CHAPTER

Using the all-important class, id, and type selectors

Focusing on the most crucial combinators

Working with the vital pseudo-classes that select child elements

CSS saves you oodles of time by making it easy to style page elements. CSS becomes even more powerful when you use selectors to specify which elements you want to work with. In this chapter, you learn the ten selectors you need to tape to your cat’s forehead so they’re always handy.

The Class Selector

If you’ve used the class attribute to assign a class name to one or more page elements, you can target those elements by using a class selector:

.class-name { property1: value1; property2: value2; etc.}

The Id Selector

If you’ve used the id attribute to assign an ID to a page element, you can target that element by using an id selector:

#id-name { property1: value1; property2: value2; etc.}

The Type Selector

To target every element that uses a particular element name (such as header or div), use the type selector:

element { property1: value1; property2: value2; etc.}

The Descendant Combinator

To target every element that’s contained within (that is, is a descendant ...