Using Parent Selectors in CSS

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>
<html>
    <head>
        <link rel="stylesheet" href="output.css">
    </head>
    <body>
        <header>
            <main>
                <h2>This is a header</h2>
            </main>
        </header>
    </body>
    <script src=output.js></script>
</html>

JavaScript (ex. input.js)

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

qaffeine(
{
    stylesheet: {},
    rules: {
    parent
    }
},
'input.css',
'output.js',
'output.css'
)

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.