focus-within pseudo class 🎧

hritik5102 · hritik5102 · commit 879a7d359537 · 2024-10-22T23:43:22.000+05:30
diff --git a/15-focus-within-pseudo-class/index.html b/15-focus-within-pseudo-class/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS - :focus-within pseudo class</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <!--- The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused.-->
+
+    <!-- Using focus-within pseudo class -->
+    <div class="box">
+      <textarea>Hello</textarea>
+    </div>
+
+    <!-- Using tabindex : allows developers to make HTML elements focusable, using the tab key
+    Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+    -->
+    <div class="box">
+      <div class="box2" tabindex="0">World</div>
+    </div>
+
+    <!-- Read more: https://stackoverflow.com/questions/7876283/using-focus-to-style-outer-div -->
+  </body>
+</html>
diff --git a/15-focus-within-pseudo-class/style.css b/15-focus-within-pseudo-class/style.css
@@ -0,0 +1,45 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Lato&display=swap");
+body {
+  font-family: Lato, Fira Code, monospace;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  background-color: lightcyan;
+  gap: 20px;
+}
+.box {
+  width: 600px;
+  height: 400px;
+  border: 2px dashed darkblue;
+  position: relative;
+}
+.box:focus-within {
+  border-color: red;
+}
+textarea {
+  resize: none;
+  width: 400px;
+  height: 300px;
+  text-align: center;
+  line-height: 300px;
+  position: absolute;
+  top: 50px;
+  left: 100px;
+  outline: 1px solid blue;
+  font-size: 16px;
+}
+.box2 {
+  resize: none;
+  width: 400px;
+  height: 300px;
+  text-align: center;
+  line-height: 300px;
+  position: absolute;
+  top: 50px;
+  left: 100px;
+  outline: 2px solid purple;
+  background-color: white;
+  font-size: 16px;
+}
