CSS selectors can be composed in various ways to give you more control over which page elements they select.
Conjunction. If you concatenate selectors without any spaces, it means that the matching element must satisfy all given selectors. This is generally used to refine the application of class or pseudo-class selectors. For example, we can write
div.error in the style sheet and this will affect only the
div tags that also have the class
a:hover will only apply when the user moves their mouse over anchor tags. It might be tempting to specify multiple classes with
.error.highlight. Even though this is part of the CSS standard, it does not work in older versions of Internet Explorer.
Descendant. Another possibility is to combine selectors with a space. This finds all elements that match the first term, then searches within each for descendant elements that match the second term (and so on). For example,
div .error selects all the elements within a
div tag that have the CSS class
error. Elements that have the class
error but no
div tag as one of its parents, are not affected.
Child. Yet another possibility is to combine two selectors with
>. For example,
div > .error. This selects all the tags with the class
error that are direct children of a
div tag. Again this does not work in older versions of Internet Explorer.
There are a few more selectors available in modern web browsers to allow other criteria such as matching adjacent siblings. Since these selectors are not widely implemented in web browsers yet, we don’t discuss them here.