Bradley Taunt
Front-end devsigner

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


Have something to say?

Reach out and chat with me on Twitter. That way your thoughts aren't lost forever on this site.