DEV Community

Tyler Scott Williams
Tyler Scott Williams

Posted on • Originally published at ogdenstudios.xyz

A Use Case for CSS Parent Selectors

#css #html

At some point, Chris Coyier suggested people write blog posts presenting why they might need parent selectors. Here's mine.

I've got some form that looks like this:

<form> <fieldset> <label for="category_1">Category 1</label> <input type="checkbox" id="category_1" name="category_1"><span></span><br><br> </fieldset> <fieldset> <label for="category_2">Category 2</label> <input type="checkbox" id="category_2" name="category_2"><span></span><br><br> </fieldset> <fieldset> <label for="category_3">Category 3</label> <input type="checkbox" id="category_3" name="category_3"><span></span><br><br> </fieldset> <input type="submit" value="Show results"> </form>
Enter fullscreen mode Exit fullscreen mode

It allows people to select some grouping of filters: category 1, category 2, and category 3. When they hit Show results, they get some results back based on these filters.

I want to give a visual cue for which filters they've used. Maybe something like a background color on each associated fieldset that contains checked checkboxes. That feels somewhat straightforward.

But right now if I want to style the fieldset based on its child, I have to use JavaScript to maybe listen for a change or click event, find the correct fieldset, and update its styles through JS.

Alternatively, I could set up a pseudo-element to do the job. But wait! input elements can't have pseudo-elements. So now I have to add an empty span as a sibling and style its pseudo-elements. The markup changes to this:

<form> <fieldset> <label for="category_1">Category 1</label> <input type="checkbox" id="category_1" name="category_1"><span></span><br><br> </fieldset> <fieldset> <label for="category_2">Category 2</label> <input type="checkbox" id="category_2" name="category_2"><span></span><br><br> </fieldset> <fieldset> <label for="category_3">Category 3</label> <input type="checkbox" id="category_3" name="category_3"><span></span><br><br> </fieldset> <input type="submit" value="Show results"> </form>
Enter fullscreen mode Exit fullscreen mode

And then I write these styles:

fieldset { position: relative; } input:checked + span:before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; background-color: green; }
Enter fullscreen mode Exit fullscreen mode

It's workable. It's only a little extra code. But it would be really slick if I could write some CSS that looked like:

input:checked PARENT_SELECTOR_SYMBOL_HERE fieldset { background-color: green }
Enter fullscreen mode Exit fullscreen mode

Here's a codepen with the sample code so you can play around with it and see what I mean

Top comments (0)