From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/jsincss-parent-selector/index.html | 86 +++++++++++++++++++------------- 1 file changed, 52 insertions(+), 34 deletions(-) (limited to 'build/jsincss-parent-selector/index.html') diff --git a/build/jsincss-parent-selector/index.html b/build/jsincss-parent-selector/index.html index 412586d..6de6405 100644 --- a/build/jsincss-parent-selector/index.html +++ b/build/jsincss-parent-selector/index.html @@ -1,52 +1,67 @@ - + Using Parent Selectors in CSS - - + + +
-

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');
+
+
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

+
+
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)

+
+
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>
+
+
<!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')
+
+
JavaScript (ex. input.js)

+
+
const qaffeine = require('qaffeine')
+const parent = require('jsincss-parent-selector')
 
 qaffeine(
 {
@@ -55,12 +70,14 @@ qaffeine(
     parent
     }
 },
-'input.css',
-'output.js',
-'output.css'
+'input.css',
+'output.js',
+'output.css'
 )
 

-
CSS (ex. input.css)

+
+
CSS (ex. input.css)

+
 
header {
     display: block;
 }
@@ -68,7 +85,8 @@ 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.

+
+
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.