tdarb.org > Using parent selectors in CSS

// 462 words // 2 minute read

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.


Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from my records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email