[[!meta title="Using Parent Selectors in CSS"]]
[[!meta date="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:
This is a header
### 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.