Dynamic Web Development with Seaside

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.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.