accssible writing about CSS & design

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)

<!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.