Combining selectors

Elements satisfying any one of a group of criteria

If we wish to use the same declarationsA specification of style as property:value. for more than one type of element, class, or ID, or any mixture, we can use commas to give a list of selectors. This rule indicates that elements in the class even or with the ID block1 should be coloured red.

.even, #block1 {
     color: red;
}

Note

The order of the listed elements, classes, and IDs is unimportant.

Elements satisfying all of a group of criteria

If instead we wish to specify that only elements of a particular type and class are to be styled, we can join together an element selector and a class selector without spaces, or more generally, any combination of elements, classes, and IDs.

The following rule indicates that any list item elementAn element for an item in a list. that is in the class odd should be given the background colour yellow.

li.odd {
    background-color: yellow;
}

Here are some other types of selectors that might be used: p#first, ol.best.second. Notice that more than one class can be specified.

Reminder

An element can be in more than one class. The class values are listed in the class attribute, separated by spaces.