Using Parent Selectors in CSS
2018-12-19
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.