The internet is brimming with web design inspiration (opens in new tab) 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.
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 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 (opens in new tab)
Liked this? Read these!
- We reveal the best web fonts (opens in new tab) for your site
- Discover the best user testing (opens in new tab) software
- Read our step-by-step guide to user experience (opens in new tab)
- These Adobe Illustrator tutorials (opens in new tab) will keep you busy for days
- Check out these inspiring examples of 3D art (opens in new tab)