Selectors, units, and capabilities

Although they may not seem like the most exciting of subjects, selectors, units, and capabilities are the “meat and potatoes” of CSS. Master these and your power to solve problems with CSS will increase substantially. So, skip this section at your peril!

Anatomy of a CSS rule

Before exploring some of the recent additions to CSS, to prevent confusion, let’s establish the terminology we use to describe a CSS rule. Consider the following example:

.selector {
    /* comment */
    property: value; /* declaration */
}

This rule is made up of the selector (.selector) and then, inside the curly braces, the declaration. The declaration is further defined by the property and the value. Happy we’re on the same page? Great, let’s press on.

Pseudo-elements and pseudo-classes

There is potential for some confusion when we go on shortly to talk about “pseudo” classes. The reason being is...