dindinet · February 22, 2024 23:41 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
diff --git a/style.css b/style.css
@@ -1,7 +1,10 @@
+:root{
+--background-color: #ffc0cb2a;
+}
 .container{max-width: 20vw;font-weight: 400;font-family:'Open Sans',system-ui;}
 h2{padding:0px;}
-p + h2{background-color:orange;}  /*target h2 that directly follows a p*/
-img + h2{background-color:yellow;} /* target h2 that directly follows an image*/
+p + h2{background-color:#ffe000#ffe000;} /* target h2 that directly follows a p*/
+img + h2{background-color: lightblue;} /* target h2 that directly follows an image*/
 
-p:has(+ h2),.is-p:has(+ h2){border-bottom: 2rem solid pink;} /* target .isp or p that is directly followed by h2*/
-img:has(+ h2){border-bottom: 2rem solid purple;}/*  target an image that is directly followed by an h2 */
+p:has(+ h2){border-bottom: 2rem solid pink;} /* target p that is directly followed by h2*/
+img:has(+ h2){border-bottom: 2rem solid var(--background-color);} /* target an image that is directly followed by an h2 */
diff --git a/add-padding-to-adjacent-selectors.markdown b/add-padding-to-adjacent-selectors.markdown
@@ -4,4 +4,100 @@ Add padding to adjacent selectors
 
 A [Pen](https://codepen.io/dindinet-the-scripter/pen/ZEPNdyj) by [dindinet](https://codepen.io/dindinet-the-scripter) on [CodePen](https://codepen.io).
 
-[License](https://codepen.io/license/pen/ZEPNdyj).
+[License](https://codepen.io/license/pen/ZEPNdyj).
+
+### Artice on Selecting Previous Siblings
+[https://tobiasahlin.com/blog/previous-sibling-css-has/](https://tobiasahlin.com/blog/previous-sibling-css-has/)
+
+One of the more maddening limitations of CSS was for long its inability to select elements based on their children or preceding siblings. This made it impossible to construct CSS selectors that could target previous siblings of an element, but the  [`has:()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)  pseudo-class (along with  `:not()`,  `:where()`, and  `:is()`  from  [Selectors Level 4](https://w3c.github.io/csswg-drafts/selectors/#relational)) has thrown out the old limitations and opened up a new world of possibilities when working with selectors.
+
+As of this writing,  `:has()`  is supported by  `84.68%`  of all major browsers (including Chrome and Safari), with Firefox being the notable exception. Experimental support for Firefox launched in July 2022 and can be enabled through the flag  `layout.css.has-selector.enabled`—you can track the progress  [through this Bugzilla issue](https://bugzilla.mozilla.org/show_bug.cgi?id=418039). Until that ships, you can use the  `:has()`  pseudo-class if you’re not targeting or supporting Firefox, or if you  [use a polyfill](https://www.npmjs.com/package/css-has-pseudo).
+
+## Selecting the previous sibling[#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-the-previous-sibling](https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-the-previous-sibling)
+
+Imagine that we have a series of elements, like this:
+
+```
+<div class="box"></div>
+<div class="box"></div>
+<div class="box"></div>
+<div class="circle"></div>
+<div class="box"></div>
+
+```
+
+…and we want to select and style the element that comes  _before_  the circle. The  [adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator)  (`+`) can select an element that immediately follows another element, and we can combine it with  `:has()`  that to select only the  `.box`  that’s immediately followed by a  `.circle`  (or from the circle’s perspective, its previous sibling):
+
+```
+.box:has(+ .circle) {
+  width: 40px;
+  height: 40px;
+}
+
+```
+
+You can think of this selector as first 1) selecting all boxes, and then 2) filtering the elements to only those that match the pattern “box + circle”, which will only return the circle’s previous sibling.
+
+## Selecting the nth previous sibling[#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-the-nth-previous-sibling](https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-the-nth-previous-sibling)
+
+It’s possible to use the adjacent sibling combinator to select any specific element that preceds another. We can select the 2nd previous sibling by using two adjacent sibling combinators:
+
+```
+.box:has(+ * + .circle) {
+  width: 40px;
+  height: 40px;
+}
+
+```
+
+If you want to, you can equally scope the selector to a class (rather than the catch-all  `*`). In this instance  `.box`  siblings:
+
+```
+.box:has(+ .box + .circle) {
+  width: 40px;
+  height: 40px;
+}
+
+```
+
+This selector can be difficult to grok and parse. It might help to think of it as selecting all boxes (`.box`), and then filtering those elements so that the remaining  `.box`  is the one that matches the pattern “self + box + circle”, which will only be the 2nd previous sibling.
+
+If you want to select the 3rd previous sibling, you can use three adjacent sibling combinators…
+
+```
+.box:has(+ * + * + .circle) {
+  width: 40px;
+  height: 40px;
+}
+
+```
+
+…and so on and so forth. You can keep on adding adjacent sibling combinators (`+`) for as long as you want, to select any nth preceding element.
+
+## Selecting all preceding siblings[#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-all-preceding-siblings](https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-all-preceding-siblings)
+
+If you want to select  _all_  previous siblings, you can combine the  `:has()`  pseudo-class with the general sibling combinator (`~`), which matches the second element as long as it follows the first, regardless of its position:
+
+```
+.box:has(~ .circle) {
+  width: 40px;
+  height: 40px;
+}
+
+```
+
+In other words, as long as the  `.box`  in this example is followed by a  `.circle`  at some point, the  `.box`  will be selected and styled.
+
+## Selecting all preceding siblings except the most adjacent sibling[#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-all-preceding-siblings-except-the-most-adjacent-sibling](https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-all-preceding-siblings-except-the-most-adjacent-sibling)
+
+Finally, we can combine the general sibling combinator (`~`) with the adjacent sibling combinator (`+`) and select all preceding elements except the most adjacent one:
+
+```
+.box:has(~ * + .circle) {
+  width: 40px;
+  height: 40px;
+}
+
+```
+
+This selector selects any  `.box`  that matches the pattern “self followed by at any point a box + circle”.
diff --git a/add-padding-to-adjacent-selectors.markdown b/add-padding-to-adjacent-selectors.markdown
@@ -0,0 +1,7 @@
+Add padding to adjacent selectors
+---------------------------------
+
+
+A [Pen](https://codepen.io/dindinet-the-scripter/pen/ZEPNdyj) by [dindinet](https://codepen.io/dindinet-the-scripter) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/ZEPNdyj).
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<div class="container">
+  <p>Here we are targeting h2 tags which directly follow p (p + h2) or image tags (img + h2).</p>
+  <p>Hickory Dickory Dock the mouse ran up the clox.</p>
+  <div  class="is-p">Humpy Dumpy was everso grumpy</div>
+  <h2>Gladioli Glad You Could Make It</h2>
+  <p>Jack kicked Jill and took a pill and died a painful death</p>
+  <p>The Government were made of cement</p>
+  <h2>Barbarella was a lady</h2>
+  <img src="https://res.cloudinary.com/wilton/image/upload/w_500,f_auto,q_auto/v1654618627/steam.jpg"/>
+<h2>The Mathmos: Living Energy in Liquid Form</h2>
+
+
+</div>
diff --git a/style.css b/style.css
@@ -0,0 +1,7 @@
+.container{max-width: 20vw;font-weight: 400;font-family:'Open Sans',system-ui;}
+h2{padding:0px;}
+p + h2{background-color:orange;}  /*target h2 that directly follows a p*/
+img + h2{background-color:yellow;} /* target h2 that directly follows an image*/
+
+p:has(+ h2),.is-p:has(+ h2){border-bottom: 2rem solid pink;} /* target .isp or p that is directly followed by h2*/
+img:has(+ h2){border-bottom: 2rem solid purple;}/*  target an image that is directly followed by an h2 */
No results found