3 simple steps
Will multiple parent selectors ever be possible?
Ryan Irving, Henley-on-Thames, UK
HR: Multiple parents make stylesheets much more terse, which is always nice. It reduces filesize and maintenance, so it’s something we’re definitely interested in. The best thing is, we have it already!
Currently, the most obvious solution is to use a preprocessor’s in-built nesting functionality to list our multiple parents, then nest our one child in it. This still compiles out to relatively verbose CSS, but it is nice and terse in our source.
There’s a pseudo-selector in Selectors Level 4 that provides this natively. :matches (or :any , in older specs) allows you to write much more terse selectors, which the browser expands internally.
To get :matches() working requires a little extra work. It’s actually referred to as :any() in older specs, and requires vendor prefixing. To this end, I’d recommend using cssnext ( cssnext.io) to transpile the new syntax back to better support.