How to use multiple parent selectors

The internet is brimming with web design inspiration and tools to aid your web projects, which is helpful as designing for the web can get tricky. Making life as easy as possible is the key.

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. Here are three ways to use multiple parent selectors.

01. Preprocessors

multiple parent selectors

Use Sass

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.

02. :matches()

multiple parent selectors

Use a pseudo-selector

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.

03. cssnext

multiple parent selectors

Transpile with cssnext

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 to transpile the new syntax back to better support.

Words: Harry Roberts

Harry Roberts is a consultant frontend architect, writer and speaker. This article originally appeared in issue 276 of net magazine

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.