CSS / SCSS：两组选择器的笛卡尔积

Question

I want to apply a CSS rule to all <ol> or <ul> that are next siblings of either a <h1> , <h2> , <h3> , or <h4> .

Something like this clearly doesn't work:

h1,h2,h3,h4 + ol,ul {
}

And parentheses to alter the order of evaluation seem to be not allowed in CSS.

So, I have to write something like this:

h1 + ol, h1 + ul, h2 + ol, h2 + ul, h3 + ol, h3 + ul, h4 + ol, h4 + ul {
}

This works, but is quite long. Is there any trick to achieve the same in a shorter and more scalable notation? I'm using SCSS, so it can be either pure CSS or SCSS.

Answer 1

You can nest the selectors as such, using & to reference the parent selector in a nested context:

h1, h2, h3, h4 {
    & + ol, & + ul {
        // Styles go here
    }
}

...this will generate the combination of all headings( h1 through h4 ) and its immediate sibling ( ul or ol ) in the selector format you wanted, <heading> + <list-parent> :

h1 + ol, h1 + ul, h2 + ol, h2 + ul, h3 + ol, h3 + ul, h4 + ol, h4 + ul {
    // Styles go here
}

This still ends up being a tad bit verbose, because you have to manually comma-delineate each child combination, ie you can't use & + (ol, ul) { ... } for example. However, this is considerably better than other alternatives.

Update: Using :matches() in CSS 4 working draft

@IlyaStreltsyn noted in a comment below that :matches() ^{[1] , [2]} (previously known as :any , available via vendor prefixes, eg :-webkit-any() ) functional pseudo-class, part of the specification for CSS4, can be seen as a likely alternative solution that is way simpler:

:matches(h1, h2, h3, h4) + :matches(ol, ul) {
    // Styles go here
}

Note that the :matches() pseudo-class is still not widely supported across browsers at the time of writing (October 2017).