From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/jsincss-parent-selector/index.html | 92 ++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 build/jsincss-parent-selector/index.html (limited to 'build/jsincss-parent-selector/index.html') diff --git a/build/jsincss-parent-selector/index.html b/build/jsincss-parent-selector/index.html new file mode 100644 index 0000000..412586d --- /dev/null +++ b/build/jsincss-parent-selector/index.html @@ -0,0 +1,92 @@ + + + + + + + Using Parent Selectors in CSS + + + + + + +
+

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.

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf