:is()

pktcodes · pktcodes · commit 2a6a668542d7 · 2022-11-11T20:35:37.000-06:00
diff --git a/index.html b/index.html
@@ -14,40 +14,15 @@
   </head>
 
   <body>
-    <!-- Emmet Snippets -->
-    <!-- h1 -->
-    <h1></h1>
-    <!-- h1.first -->
-    <h1 class="first"></h1>
-    <!-- h1.first.second -->
-    <h1 class="first second"></h1>
-    <!-- h1#first -->
-    <h1 id="first"></h1>
-    <!-- h1.first#second -->
-    <h1 class="first" id="second"></h1>
-    <!-- .first#third -->
-    <div class="first" id="third"></div>
-    <!-- ul>li -->
-    <ul>
-      <li></li>
-    </ul>
-    <!-- ul>li*5 -->
-    <ul>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-    </ul>
-    <!-- h1{hello world} -->
-    <h1>hello world</h1>
-    <!-- ul>li*5{$ hello world} -->
-    <ul>
-      <li>1 hello world</li>
-      <li>2 hello world</li>
-      <li>3 hello world</li>
-      <li>4 hello world</li>
-      <li>5 hello world</li>
-    </ul>
+    <nav>
+      <h2>heading</h2>
+    </nav>
+    <div>
+      <h2>heading</h2>
+    </div>
+    <section>
+      <h2>heading</h2>
+    </section>
+    <h2>heading</h2>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,16 @@
+/* 
+:is()
+The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
+*/
+
+/* Want to add color red to h2 only which is inside the elements */
+/* nav h2:hover,
+div h2:hover,
+section h2:hover {
+  color: red;
+} */
+
+/* write less code using is:() */
+:is(nav, div, section) h2:hover {
+  color: red;
+}
