From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/jsincss-parent-selector/index.html | 95 -------------------------- 1 file changed, 95 deletions(-) delete mode 100644 build/posts/jsincss-parent-selector/index.html (limited to 'build/posts/jsincss-parent-selector') diff --git a/build/posts/jsincss-parent-selector/index.html b/build/posts/jsincss-parent-selector/index.html deleted file mode 100644 index 4c98e89..0000000 --- a/build/posts/jsincss-parent-selector/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - 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