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:
.round {
/* selector */
border-radius: 10px; /* declaration */
}
This rule is made up of the selector (.round
) and then the declaration (border-radius: 10px
). The declaration is further defined by the property (border-radius
) and the value (10px
). Happy we're on the same page? Great, let's press on.
At the time of writing this, the Selectors Level 4 working draft details a host of new selectors such as is()
, has()
, and nth-col
. Sadly, there is not a single...