CSS Boolean Selectors
Heads up! This article was written over 14 years ago. While it may still be helpful, please verify any information, as my perspectives and practices may have evolved.
Just a short one.
Have you been in the situation where you’d like to be able to enable a style only when both classes are defined for an element? For example:
1
2
3
4
5
6
7
8
<ul>
<li class="level-0">Home</li>
<li class="level-0">Electronics</li>
<li class="level-1">Televisual Boxes</li>
<li class="level-1 over">Kettles</li>
<li class="level-0">Furniture</li>
<li class="level-0">Clearance</li>
</ul>
We’ll ignore the fact that we could have used the :hover pseudo-class, and that we could have used an additional <ul></ul> to define the level-1 items.
Logical AND (&&)
We can invoke a specific over CSS class on only the level-1 items with the following:
1
2
3
li.level-1.over {
background-color: red;
}
Keeping adding additional class by chaining with the .className syntax.
Logical OR (||) Of course, to OR the classes you simply comma-separate them:
1
2
3
4
li.class1,
li.class2 {
background-color: green;
}