Selectors Re-Visited - :root pseudo-class Selector

pktcodes · pktcodes · commit 13784f576404 · 2022-11-08T22:50:12.000-06:00
diff --git a/index.html b/index.html
@@ -11,10 +11,17 @@
   </head>
 
   <body>
-    <a href="#">general link</a>
-    <a href="https://www.css3.com/">visited link</a>
-    <a href="#">hover link</a>
-    <a href="#">active link</a>
-    <a>simple link</a>
+    <h1 class="absolute">I'm absolute</h1>
+    <h1 class="relative">I'm relative</h1>
+    <p class="absolute">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
+      sapiente porro nostrum incidunt molestias quia distinctio repellat ipsa.
+      Quo, mollitia?
+    </p>
+    <p class="relative">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
+      temporibus iusto nesciunt unde laudantium nostrum, illo saepe pariatur
+      facere optio?
+    </p>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,29 +1,20 @@
 /* 
-:link - unvisited links with href
-:visited - visited links
-:hover - hover
-:active - as the user click's 
-a - all links
+:root root element of the document, higher specificity
+html element
+general styles
+css variables
 */
-a {
-  display: block;
-  background: yellow;
-  margin-bottom: 0.5rem;
-  padding: 0.5rem;
-}
 
-a:link {
-  color: aqua;
+:root {
+  font-size: 10px;
 }
 
-a:visited {
+.absolute {
+  font-size: 24px;
   color: red;
 }
 
-a:hover {
-  color: green;
-}
-
-a:active {
-  color: fuchsia;
+.relative {
+  color: blue;
+  font-size: 1.5rem;
 }
