Grouping css selectors

Is it possible to group two selectors so that the element matches only if both selectors are executed? For example, if I want an element to satisfy both .a>.b~.c and .d~.e selectors, is it possible to write a selector that matches the intersection of these selectors?

+4
source share
3 answers

No, you cannot set intersection in CSS selectors. Sometimes you may find a way to combine the two selectors into one that solves your specific problem, but I don't think there is a way to combine your two selectors of the selection.

+2
source

If you use a class selector, as in your example, you can relate the following classes:

 .a > .bd ~ .ce 

Selects an element that has like class="ce"
which is a brother (ie comes, directly or not, after) an element that has like class="bd"
which is a child of some element of class="a"

Or, for example, if you want .ce to .ce after an element with class b or d :

 .a > .b ~ .ce, .a > .d ~ .ce 

Selects an element that has like class="ce"
which is a child of an element with class="b" or class="d" (or both)
which is a child of some element of class="a"

Both selectors mean that .b , .d and .ce are all child elements of .a . I should also think that it gives you the intersection of the class selector you are looking for.

+3
source

I think BoltClock is on the right lines, but exactly matches the selectors you specify

 .a > .b ~ .d ~ .ce, .a > .bd ~ .ce, .a > .d ~ .b ~ .ce { } 

since we have no information regarding the relative locations of b and d.

+1
source

Source: https://habr.com/ru/post/1336532/


All Articles