8.3Composed Selectors
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 error
. Similarly 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.