From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/posts/jsincss-parent-selector/index.html | 94 ++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 build/posts/jsincss-parent-selector/index.html (limited to 'build/posts/jsincss-parent-selector/index.html') diff --git a/build/posts/jsincss-parent-selector/index.html b/build/posts/jsincss-parent-selector/index.html new file mode 100644 index 0000000..a4ad5cc --- /dev/null +++ b/build/posts/jsincss-parent-selector/index.html @@ -0,0 +1,94 @@ + + + + + + + + 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