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.