blob: f6176d8846dd2eb8ba2bf564d87a0bf7bcc4b602 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
# Using Parent Selectors in CSS
2018-12-19
I recently saw a Twitter thread posted by <a href="https://twitter.com/innovati/status/1068998114491678720">Tommy Hodgins</a> 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 <a href="https://www.npmjs.com/package/jsincss-parent-selector">jsincss-parent-selector</a> and <a href="https://github.com/tomhodgins/qaffeine">qaffeine</a>
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 <a href="https://www.youtube.com/watch?v=rG8cLe7VbW0">video covering this topic</a> if you prefer to follow along.
|
