HTML, XHTML, and CSS Bible, Fourth Edition

Appendix D. CSS Selectors Quick Reference

IN THIS APPENDIX

• Basic element selectors

• Descendant selectors

• Child selectors

• Adjacent sibling selectors

• Class selectors

• ID selectors

• Attribute selectors

TCSS selectors are specific patterns used to match elements that will have the corresponding properties applied to them. CSS has many different patterns to match many different aspects of elements—their name/type, class, ID, place in the document hierarchy, and more.

In addition to using a single pattern to match elements, you can also combine patterns to create more specific matches. For example, the following selector matches all <h1> elements:

h1 { properties }

If you need more specificity, you can add a class selector as in the following example, which matches all <h2> elements with a class of section:

h2.section  { properties }

You can take the selector even one step further by adding a descendant selector, as in the following example, which matches all <h1> elements with a class of section that are also descendants of <h3> elements:

h1 h2.section  { properties }

The following sections provide a quick reference into the various CSS selector patterns.

Basic Element Selectors

The basic element selectors are used to match specific elements by name (e.g., <p>, <h1>, and so on).

Syntax:

E { properties }

Matches all E elements.

Syntax:

* { properties }

Matches all elements.

Note

The universal selector (*) guarantees only a universal (all element) match if it is the sole criteria in the selector. If additional conditions ...