Selectors Re-Visited - Link pseudo-class Selectors

pktcodes · pktcodes · commit d40a82fd6924 · 2022-11-08T22:06:22.000-06:00
diff --git a/index.html b/index.html
@@ -11,15 +11,10 @@
   </head>
 
   <body>
-    <div>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure hic ea
-      voluptates corrupti nisi repellendus mollitia corporis vel iusto ducimus.
-    </div>
-    <div class="header">
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde soluta
-      temporibus asperiores ut doloribus tempore deleniti, inventore ab labore
-      blanditiis.
-    </div>
-    <a href="#">i'm a simple link</a>
+    <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>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,17 +1,29 @@
-/* Selectors Re-Visited - :hover pseudo-class Selector */
+/* 
+:link - unvisited links with href
+:visited - visited links
+:hover - hover
+:active - as the user click's 
+a - all links
+*/
+a {
+  display: block;
+  background: yellow;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+}
 
-div:hover {
-  color: green;
+a:link {
+  color: aqua;
 }
 
-.header:hover {
-  color: white;
-  background: blue;
-  letter-spacing: 5px;
+a:visited {
+  color: red;
 }
 
 a:hover {
-  text-decoration: none;
-  font-size: 20px;
-  background: fuchsia;
+  color: green;
+}
+
+a:active {
+  color: fuchsia;
 }
