Menu
Is it possible to group two selectors so that an element is matched only if both selectors are satisfied? For example, if I want the element to satisfy both the selectors .a>.b~.c and .d~.e, is it possible to write a selector that matches the intersection of these selectors?
816
To group selectors, separate each selector with a comma.
Grouping selectors - CSS TutorialYou can group multiple selectors into one declaration block, separating each selector with a comma. This will apply the styles to all of the matched elements in the list. You can also mix different types of selectors in the same list. The spaces are optional, but the comma is not.
The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.
You can write the CSS styles to a specific element or group elements together with a specific style. Grouping CSS styles saves page space and allows you to apply particular styles to multiple tags.
If you're using class selectors as in your example, you can chain classes like this:
.a > .b.d ~ .c.e
Selects an element that has both
class="c e"
which is a sibling of (i.e. comes, directly or not, after) an element that has bothclass="b d"
which is a child of some element ofclass="a"
Or, like this, if you want .c.e to occur after an element that has either class b or d:
.a > .b ~ .c.e, .a > .d ~ .c.e
Selects an element that has both
class="c e"
which is a sibling of an element with eitherclass="b"orclass="d"(or both)
which is a child of some element ofclass="a"
Both selectors imply that .b, .d and .c.e are all children of .a. I should also think it gives you the class selector intersection that you're looking for.
143
No, you cannot do set intersection in CSS selectors. Sometimes you can find a way to combine two selectors into one that solves your specific problem, but I don't think there's a way to combine your two sample selectors.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
