Add css scope demo.

bennadel · bennadel · commit 6cce03d4e27f · 2025-04-29T06:25:51.000-04:00
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Using :scope To Identify The Host Element In A CSS Selector](https://bennadel.github.io/JavaScript-Demos/demos/scope-pseudo-class)
 * [Comparing Undefined Values In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/undefined-comparison)
 * [Using The Button Form Attribute To Create Standalone Buttons In HTML](https://bennadel.github.io/JavaScript-Demos/demos/link-buttons)
 * [Box Breathing Exercise With SpeechSynthesis And Alpine.js](https://bennadel.github.io/JavaScript-Demos/demos/box-breathing-alpine)
diff --git a/demos/scope-pseudo-class/index.htm b/demos/scope-pseudo-class/index.htm
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+<link rel="stylesheet" type="text/css" href="./main.css" />
+<body>
+
+	<h1>
+		Using :scope To Identify The Host Element In A CSS Selector
+	</h1>
+
+	<p onclick="selectOdds( event )">
+		<span> <em>1</em> </span>
+		<span> <em>2</em> </span>
+		<span> <em>3</em> </span>
+		<span> <em>4</em> </span>
+		<span> <em>5</em> </span>
+		<span> <em>6</em> </span>
+		<span> <em>7</em> </span>
+		<span> <em>8</em> </span>
+		<span> <em>9</em> </span>
+		<span> <em>10</em> </span>
+	</p>
+
+	<script type="text/javascript">
+
+		function selectOdds( event ) {
+
+			var targets = event
+				.currentTarget
+				// In the selector, ":scope" represents the current element on which the
+				// query is being called. This allows us to use the direct-descendant
+				// operator since it gives us a way to identify the parent of the direct
+				// descendants.
+				.querySelectorAll( ":scope > :nth-child( odd )" )
+			;
+
+			for ( var node of targets ) {
+
+				node.style = "background-color: hotpink ; color: white ;";
+
+			}
+
+		}
+
+	</script>
+
+</body>
+</html>
diff --git a/demos/scope-pseudo-class/main.css b/demos/scope-pseudo-class/main.css
@@ -0,0 +1,29 @@
+
+html {
+	box-sizing: border-box ;
+}
+html *,
+html *:before,
+html *:after {
+	box-sizing: inherit ;
+}
+
+body {
+	font-family: monospace ;
+	font-size: 20px ;
+}
+
+p {
+	display: flex ;
+	font-size: 30px ;
+	gap: 10px ;
+}
+p span {
+	background-color: #f0f0f0 ;
+	border-radius: 5px ;
+	padding: 3px 15px ;
+}
+p:hover {
+	outline: 2px solid cyan ;
+	outline-offset: 3px ;
+}
