Using Parent Selectors in CSS

on Bradley Taunt's blog

I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the parent selector instantly peaked my interest.

Being able to target an element’s parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:

var el = document.getElementById('custom-div');
var parent = el.closest(selectors);

And then add any custom styling to the parent element directly in JavaScript - or toggle a class which opens a whole other can of worms.

Save the day with jsincss-parent-selector and qaffeine

By using the jsincss-parent-selector and qaffeine plugins we can target an element’s parent in CSS without breaking a sweat. Let’s break it down:

Import the packages

npm install jsincss-parent-selector qaffeine

HTML (ex. index.html)

Now we add our very simple HTML skeleton:

<!doctype html>
        <link rel="stylesheet" href="output.css">
                <h2>This is a header</h2>
    <script src=output.js></script>

JavaScript (ex. input.js)

const qaffeine = require('qaffeine')
const parent = require('jsincss-parent-selector')

    stylesheet: {},
    rules: {

CSS (ex. input.css)

header {
    display: block;
main[--js-parent] {
    background: blue;

Then simply run node against your js file. That’s it! I would also suggest checking out Tommy’s video covering this topic if you prefer to follow along.

Did you find this article helpful or interesting?
If you're feeling generous, consider donating to show your support. Thanks!