From 99c2f5fcd2b9caf814331a9932813e783bbfe5f1 Mon Sep 17 00:00:00 2001
From: Ajay Dhangar <ajaydhangar49@gmail.com>
Date: Sun, 16 Nov 2025 21:35:12 +0530
Subject: [PATCH] Doce: CSS Selectors

---
 docs/css/selectors/attribute-selectors.mdx    | 115 +++++++++++++++++-
 .../combinators/adjacent-sibling.mdx          |  90 +++++++++++++-
 docs/css/selectors/combinators/child.mdx      | 109 ++++++++++++++++-
 docs/css/selectors/combinators/descendant.mdx | 110 ++++++++++++++++-
 .../selectors/combinators/general-sibling.mdx |  97 ++++++++++++++-
 docs/css/selectors/pseudo-classes.mdx         | 100 ++++++++++++++-
 docs/css/selectors/pseudo-elements.mdx        |  79 +++++++++++-
 docs/css/selectors/simple/class.mdx           |  95 ++++++++++++++-
 docs/css/selectors/simple/element.mdx         |  80 +++++++++++-
 docs/css/selectors/simple/grouping.mdx        | 104 +++++++++++++++-
 docs/css/selectors/simple/id.mdx              |  72 ++++++++++-
 docs/css/selectors/simple/universal.mdx       |  90 +++++++++++++-
 12 files changed, 1129 insertions(+), 12 deletions(-)

diff --git a/docs/css/selectors/attribute-selectors.mdx b/docs/css/selectors/attribute-selectors.mdx
index e345ed2..d4fffd3 100644
--- a/docs/css/selectors/attribute-selectors.mdx
+++ b/docs/css/selectors/attribute-selectors.mdx
@@ -1 +1,114 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: Attribute Selectors
+description: "Learn how to use Attribute Selectors to target elements based on the presence, exact value, or partial match of their HTML attributes, such as type, href, or target."
+keywords: [CSS Attribute Selectors, Attribute presence, Attribute value, Substring matching, CSS Selectors, CodeHarborHub]
+sidebar_label: Attribute Selectors
+---
+
+So far, we've targeted elements by their tag name, class, ID, or position. **Attribute Selectors** give us a powerful new way to target elements based on the attributes they possess in the HTML (like `type`, `href`, `title`, or `disabled`).
+
+This is incredibly useful for styling elements that share the same tag but have different functions (e.g., different input types).
+
+<AdsComponent />
+<br />
+
+## The Basic Syntax
+
+Attribute selectors are always enclosed in **square brackets (`[]`)**.
+
+### 1. Attribute Presence Selector `[attr]`
+
+This is the simplest form. It selects any element that simply **has the specified attribute**, regardless of its value.
+
+| Syntax | Example | Targets |
+| :--- | :--- | :--- |
+| **`[attr]`** | `[disabled]` | All elements that possess the **`disabled`** attribute, regardless of its value. |
+| **`a[title]`** | `a[title]` | All `<a>` tags that have a **`title`** attribute present. |
+| **`[attr="value"]`** | `[type="submit"]` | All elements where the `type` attribute value is **exactly `"submit"`**. |
+| **`a[target="_blank"]`** | `a[target="_blank"]` | All links that have the `target` attribute set **exactly to `"_blank"`**. |
+
+```css title="Styles any input that is disabled, regardless of its type"
+input[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+```
+
+### 2. Exact Attribute Value Selector `[attr="value"]`
+
+This selects any element that has the specified attribute **and** its value exactly matches the one provided.
+
+| Syntax | Example | Targets |
+| :--- | :--- | :--- |
+| `[attr="value"]` | `[type="submit"]` | All elements whose `type` attribute is **exactly** `"submit"`. |
+| `a[target="_blank"]` | `a[target="_blank"]` | All anchor tags (`<a>`) whose `target` attribute is **exactly** `"_blank"` (opens in a new tab). |
+
+```css title="Targets only submit buttons"
+input[type="submit"] {
+  background-color: #28a745; /* Green */
+  color: white;
+}
+```
+
+<AdsComponent />
+<br />
+
+## Substring Matching (Advanced Selectors)
+
+CSS offers several specialized operators for matching only a *part* of the attribute's value.
+
+| Operator | Syntax | Description | Specificity Score |
+| :--- | :--- | :--- | :--- |
+| **`~=`** | `[attr~="value"]` | Contains the whole **word** (`value`), separated by spaces. (e.g., `class="nav link"`, targets `link`) | (0, 0, 1, 0) |
+| **<code>&#124;=</code>** | <code>[attr&#124;="value"]</code> | Starts with the whole **word** (`value`), followed by a **hyphen** (`-`). (e.g., `lang="en-US"`) | (0, 0, 1, 0) |
+| **`^=`** | `[attr^="value"]` | **Starts with** the exact string (`value`). | (0, 0, 1, 0) |
+| **`$=`** | `[attr$="value"]` | **Ends with** the exact string (`value`). (e.g., targeting `.pdf` links) | (0, 0, 1, 0) |
+| **`*=`** | `[attr*="value"]` | **Contains** the exact string (`value`) **anywhere** in the attribute. | (0, 0, 1, 0) |
+
+### Example: Targeting File Extensions
+
+You can use the `$=` selector to target links that end with a specific file extension, like `.pdf`.
+
+```css title="styles.css"
+/* Targets any link whose 'href' ends with '.pdf' */
+a[href$=".pdf"] {
+  padding-right: 20px;
+  background: url('/icons/pdf.png') no-repeat right center;
+}
+```
+
+### Example: Targeting Partial Class Names
+
+You can use `*=` to style elements whose class names contain a specific component, which is useful in utility frameworks.
+
+```css
+/* Targets any element whose class contains the word 'btn-' */
+[class*="btn-"] {
+  cursor: pointer;
+  border-radius: 4px;
+}
+```
+
+## Specificity Score
+
+Attribute Selectors have the same medium specificity as **Class Selectors**.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Attribute Selector** | **(0, 0, 1, 0)** |
+
+A score of **10** means they easily override Element Selectors but can be overridden by ID Selectors.
+
+<AdsComponent />
+<br />
+
+## Interactive Attribute Selector Demo
+
+In this demo, the CSS targets inputs based on their `type` attribute. Notice how different selectors are needed for the text field and the password field.
+
+<CodePenEmbed 
+  title="Interactive Attribute Selector Demo"
+  penId="OPNbqRE"
+/>
+
+**Challenge:** Remove the `required` attribute from the text input in the HTML. The red border will instantly disappear, showing the power of the presence selector `[required]`.
\ No newline at end of file
diff --git a/docs/css/selectors/combinators/adjacent-sibling.mdx b/docs/css/selectors/combinators/adjacent-sibling.mdx
index e345ed2..27849e4 100644
--- a/docs/css/selectors/combinators/adjacent-sibling.mdx
+++ b/docs/css/selectors/combinators/adjacent-sibling.mdx
@@ -1 +1,89 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Adjacent Sibling Combinator
+description: "Learn how to use the Adjacent Sibling Combinator (+) to select an element that immediately follows another element at the same level in the HTML structure."
+keywords: [CSS Adjacent Sibling Combinator, Plus Selector, Immediate Follow, Sequential Styling, CSS Combinators, CodeHarborHub]
+sidebar_label: Adjacent Sibling Combinator
+---
+
+We've explored selectors based on hierarchy (parent/child). Now we look at selectors based on **sequence**—elements that appear one after the other.
+
+The **Adjacent Sibling Combinator** selects an element that is the **immediate successor** of a preceding element, and both must be at the same level in the HTML structure (siblings).
+
+It is represented by the **plus sign (`+`)**.
+
+<AdsComponent />
+<br />
+
+## How to Use the Adjacent Sibling Combinator
+
+The rule is very strict: the second element must directly and immediately follow the first element in the HTML source code.
+
+### The Syntax
+
+```css title="Adjacent Sibling Combinator Syntax"
+preceding_selector + target_selector {
+  /* styles applied ONLY to the target_selector */
+}
+```
+
+  * **`preceding_selector`**: The element that comes first (e.g., `h2`, `.callout`).
+  * **`target_selector`**: The element that immediately follows the preceding element.
+
+### Example: Spacing After a Heading
+
+A very common use case is applying specific top margin or spacing to a paragraph *only* when it immediately follows a main heading.
+
+<Tabs>
+<TabItem value="html" label="HTML Structure">
+
+```html
+<div class="content">
+  <h2>Main Section Title</h2>  <p>First paragraph after the title.</p> <div>
+    <p>Second paragraph (UNSTYLED)</p>
+  </div>
+</div>
+```
+
+</TabItem>
+<TabItem value="css" label="CSS Rule">
+
+```css
+/* Targets ONLY a <p> that IMMEDIATELY follows an <h2> */
+h2 + p {
+  margin-top: 30px; /* Extra space above the first paragraph */
+  font-weight: bold;
+}
+```
+
+</TabItem>
+</Tabs>
+
+In this example, the **first** paragraph gets the `margin-top: 30px;` because it is the adjacent sibling of `<h2>`. The second paragraph is **ignored** because it is contained within a `<div>`, meaning its immediate preceding sibling is the `<div>`, not the `<h2>`.
+
+<AdsComponent />
+<br />
+
+## How it Relates to Flow
+
+The Adjacent Sibling Combinator is a powerful tool for controlling the **vertical flow** of a document without relying on classes.
+
+### Strict Sequential Requirement
+
+Remember this rule: **there can be no other element or even a comment node between the two siblings.**
+
+| HTML Sequence | CSS Rule: `h2 + p` | Result |
+| :--- | :--- | :--- |
+| `<h2>...</h2> <p>...</p>` | ✅ Match | The paragraph is styled. |
+| `<h2>...</h2> <div>...</div> <p>...</p>` | No Match | The `<div>` breaks the adjacency. |
+| `<h2>...</h2> <p>...</p>` | No Match | The comment node technically breaks the adjacency. |
+
+## Interactive Adjacent Sibling Demo
+
+In this demo, the CSS rule targets a list item (`<li>`) that immediately follows an element with the class `.header-item`.
+
+<CodePenEmbed 
+  title="Interactive Adjacent Sibling Demo"
+  penId="azNBPYK"
+/>
+
+**Challenge:** Try adding a new empty `<li></li>` between "Item A" and "Item B" in the HTML panel. What happens to the styling of "Item B"?
\ No newline at end of file
diff --git a/docs/css/selectors/combinators/child.mdx b/docs/css/selectors/combinators/child.mdx
index e345ed2..065cab7 100644
--- a/docs/css/selectors/combinators/child.mdx
+++ b/docs/css/selectors/combinators/child.mdx
@@ -1 +1,108 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Child Combinator
+description: "Learn how to use the Child Combinator (>) to target elements that are only one level deep inside a parent, ensuring highly precise and immediate contextual styling."
+keywords: [CSS Child Combinator, Greater Than Selector, Direct Child, Immediate Nesting, CSS Combinators, CodeHarborHub]
+sidebar_label: Child Combinator
+---
+
+The **Child Combinator** allows for very precise contextual styling. While the **Descendant Combinator** (space) targets an element nested *anywhere* inside a parent, the Child Combinator (`>`) targets elements that are **direct children**—meaning they are only nested one level deep.
+
+This selector is ideal when you need to style only the immediate children of a component and leave deeper nesting untouched.
+
+<AdsComponent />
+<br />
+
+## How to Use the Child Combinator
+
+The Child Combinator is represented by the **greater-than sign (`>`)** placed between two selectors.
+
+### The Syntax
+
+```css
+/* Child Combinator Syntax */
+parent_selector > child_selector {
+  /* styles applied ONLY to the immediate child_selector */
+}
+```
+
+  * **`parent_selector`**: The direct parent element (e.g., `.card`, `ul`).
+  * **`child_selector`**: The element that must be the immediate child of the parent.
+
+### Example
+
+Imagine a list structure where you want to style only the top-level list items, but not any nested sub-lists.
+
+<Tabs>
+<TabItem value="html" label="HTML Structure">
+
+```html
+<ul class="main-menu"> 
+  <li>Item 1</li>
+   <li>
+    Item 2
+    <ul>
+      <li>Sub-Item 2.1</li> 
+    </ul>
+  </li>
+  <li>Item 3</li>
+</ul>
+```
+
+</TabItem>
+<TabItem value="css" label="CSS Rule">
+
+```css
+/* Targets ONLY <li> elements that are IMMEDIATE children of .main-menu */
+.main-menu > li {
+  font-weight: bold;
+  color: #c2185b; /* Deep Pink */
+  border-bottom: 1px solid #f8bbd0;
+}
+```
+
+</TabItem>
+</Tabs>
+
+In the example above, the styles are applied to "Item 1," "Item 2," and "Item 3," but **not** to "Sub-Item 2.1," because that sub-item's direct parent is the inner `<ul>`, not `.main-menu`.
+
+<AdsComponent />
+<br />
+
+## Child vs. Descendant (The Critical Difference)
+
+Understanding the distinction between the two most common combinators is vital for writing robust CSS.
+
+| Combinator | Syntax | Rule | Scope |
+| :--- | :--- | :--- | :--- |
+| **Descendant** | `A B` (Space) | Selects `B` nested **anywhere** inside `A`. | Broad and less strict. |
+| **Child** | `A > B` (Greater-than) | Selects `B` only if it is the **immediate child** of `A`. | Strict and specific (one level deep). |
+
+### Visualizing the Difference
+
+Consider the same HTML:
+
+```html title="index.html"
+<div class="header">
+  <p>Paragraph 1</p> 
+  <section>
+    <p>Paragraph 2</p> 
+  </section>
+</div>
+```
+
+| Selector | Targets | Why? |
+| :--- | :--- | :--- |
+| `.header p` | Paragraph 1 and 2 | The space targets **all** descendants. |
+| `.header > p` | Paragraph 1 **only** | The `>` targets only the immediate children. |
+
+
+## Interactive Child Combinator Demo
+
+In this demo, try changing the CSS rule from the Child Combinator (`>`) to the Descendant Combinator (space) to see how the scope of the rule changes instantly.
+
+<CodePenEmbed 
+  title="Interactive Child Combinator Demo"
+  penId="pvyNpoy"
+/>
+
+**Challenge:** Change `.widget-footer > a` to `.widget-footer a` and observe how the "Legal Text Link" suddenly receives the style, proving it is a descendant, but not a direct child.
diff --git a/docs/css/selectors/combinators/descendant.mdx b/docs/css/selectors/combinators/descendant.mdx
index e345ed2..9e7e308 100644
--- a/docs/css/selectors/combinators/descendant.mdx
+++ b/docs/css/selectors/combinators/descendant.mdx
@@ -1 +1,109 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Descendant Combinator
+description: "Learn how to use the Descendant Combinator (space) to target an element that is nested anywhere inside another specific element."
+keywords: [CSS Descendant Combinator, Space Selector, Nested Elements, Contextual Styling, CSS Combinators, CodeHarborHub]
+sidebar_label: Descendant Combinator
+---
+
+You've learned how to target elements individually. Now, let's learn how to target an element based on its **context**—that is, where it lives within the HTML structure.
+
+The **Descendant Combinator** is the most common way to achieve this. It selects elements that are nested **anywhere** inside another specified parent element.
+
+<AdsComponent />
+<br />
+
+## How to Use the Descendant Combinator
+
+The Descendant Combinator is represented by a single **space** between two selectors.
+
+### The Syntax
+
+```css title="Descendant Combinator Syntax"
+ancestor_selector descendant_selector {
+  /* styles applied to the descendant_selector */
+}
+```
+
+  * **`ancestor_selector`**: The outer container or parent element (e.g., `.sidebar`, `div`, `#footer`).
+  * **`descendant_selector`**: The target element that must be inside the ancestor (e.g., `p`, `a`, `.icon`).
+
+### Example
+
+Let's say you want to style links differently, but **only** those links that are inside a navigation menu with the class `.main-nav`.
+
+<Tabs>
+<TabItem value="html" label="HTML Structure">
+
+```html
+<nav class="main-nav">
+  <a href="#">Home Link (Styled)</a>
+  <a href="#">About Link (Styled)</a>
+</nav>
+
+<p>
+  This is a regular paragraph with a 
+  <a href="#">link inside it (Ignored)</a>.
+</p>
+```
+
+</TabItem>
+<TabItem value="css" label="CSS Rule">
+
+```css
+/* Targets ONLY <a> elements that are descendants of .main-nav */
+.main-nav a {
+  color: white;
+  background-color: darkblue;
+  padding: 5px 10px;
+  text-decoration: none;
+}
+```
+
+</TabItem>
+</Tabs>
+
+The links outside of the `.main-nav` element remain their default blue color, because they do not match the required **context**.
+
+<AdsComponent />
+<br />
+
+## Descendant vs. Child (An Important Distinction)
+
+The key word to remember for the Descendant Combinator is **"anywhere."**
+
+The descendant element does **not** need to be directly nested one level deep; it can be a grandchild, great-grandchild, or any deeper level of nesting.
+
+### Example Hierarchy
+
+```html title="index.html"
+<div class="header"> 
+  <ul>
+    <li>
+      <a href="#">Link 1</a> 
+    </li>
+  </ul>
+</div>
+
+<div class="header"> 
+  <nav>
+    <a href="#">Link 2</a> 
+  </nav>
+</div>
+```
+
+The CSS rule `.header a { color: red; }` will successfully style **both** "Link 1" and "Link 2" because the `<a>` element is a descendant of the `.header` element in both cases.
+
+## Why Contextual Styling is Important
+
+1.  **Scope Control:** It prevents styles from "leaking" into unintended areas of the page. You ensure your navigation styles only apply inside the navigation area.
+2.  **Specificity:** It allows you to create highly specific styles without resorting to high-specificity selectors like IDs. For example, `ul li` (specificity: 2) is more powerful than a simple `li` (specificity: 1).
+
+
+## Interactive Descendant Combinator Demo
+
+In this demo, the CSS rule targets only `<span>` elements that are descendants of the element with the class `.special-box`. Notice how the span outside the box is ignored.
+
+<CodePenEmbed 
+  title="Interactive Descendant Combinator Demo"
+  penId="wBGoPqR"
+/>
\ No newline at end of file
diff --git a/docs/css/selectors/combinators/general-sibling.mdx b/docs/css/selectors/combinators/general-sibling.mdx
index e345ed2..65371d6 100644
--- a/docs/css/selectors/combinators/general-sibling.mdx
+++ b/docs/css/selectors/combinators/general-sibling.mdx
@@ -1 +1,96 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The General Sibling Combinator
+description: "Learn how to use the General Sibling Combinator (~) to select all elements that follow a specific preceding element, as long as they share the same parent."
+keywords: [CSS General Sibling Combinator, Tilde Selector, All Following Siblings, Sequential Styling, CSS Combinators, CodeHarborHub]
+sidebar_label: General Sibling Combinator
+---
+
+The **General Sibling Combinator** (`~`) is a much more flexible alternative to the strict **Adjacent Sibling Combinator** (`+`).
+
+While the Adjacent Sibling Selector only targets the *one* element immediately following the first, the General Sibling Combinator targets **all subsequent siblings** that follow a specific preceding element, as long as they share the same parent.
+
+<AdsComponent />
+<br />
+
+## How to Use the General Sibling Combinator
+
+The General Sibling Combinator is represented by the **tilde sign (`~`)** placed between two selectors.
+
+### The Syntax
+
+```css title="General Sibling Combinator Syntax"
+preceding_selector ~ target_selector {
+  /* styles applied to ALL following target_selector elements */
+}
+```
+
+  * **`preceding_selector`**: The starting element (e.g., `.intro`, `h3`).
+  * **`target_selector`**: The element type that is targeted if it appears later in the sequence, within the same parent.
+
+### Example: Highlighting Follow-up Content
+
+Imagine you have an article where you want all standard paragraphs (`<p>`) that appear *after* a specific introductory paragraph (`.intro`) to have a unique background color.
+
+<Tabs>
+<TabItem value="html" label="HTML Structure">
+
+```html
+<div class="article-body">
+  <p class="intro">This is the introduction paragraph.</p> 
+  <p>First follow-up paragraph.</p> 
+  <div>A random element doesn't break the flow.</div>
+  <p>Second follow-up paragraph.</p> 
+</div>
+```
+
+</TabItem>
+<TabItem value="css" label="CSS Rule">
+
+```css
+/* Targets ALL <p> elements that follow an element with class .intro */
+.intro ~ p {
+  background-color: #f0f4c3; /* Pale Yellow */
+  border-left: 5px solid #cddc39; /* Lime Green border */
+  padding: 10px;
+}
+```
+
+</TabItem>
+</Tabs>
+
+In this example, both the "First follow-up paragraph" and the "Second follow-up paragraph" are styled, even though they are separated by a `<div>` tag. The flow is not broken by intervening elements, only by the end of the parent container.
+
+<AdsComponent />
+<br />
+
+## General Sibling vs. Adjacent Sibling
+
+This is a critical distinction to master:
+
+| Combinator | Syntax | Condition | Targets |
+| :--- | :--- | :--- | :--- |
+| **Adjacent** | `A + B` | **Strict:** `B` must *immediately* follow `A`. | Only the **first** following sibling. |
+| **General** | `A ~ B` | **Flexible:** `B` can follow `A` anywhere in the sequence. | **All** following siblings of type `B`. |
+
+### Visualizing the Difference
+
+Consider a list of items:
+
+1.  `<li>Start</li>`
+2.  `<li>A</li>`
+3.  `<li>B</li>`
+4.  `<li>C</li>`
+
+  * Rule: `li:first-child + li` (Adjacent) $\rightarrow$ Styles only **Item A**.
+  * Rule: `li:first-child ~ li` (General) $\rightarrow$ Styles **Item A, Item B, and Item C**.
+
+## Interactive General Sibling Demo
+
+In this demo, the CSS rule targets all `<span>` elements that appear after the `<h3>` element within the same parent `div`. Notice how the intervening paragraph doesn't stop the styling.
+
+<CodePenEmbed 
+  title="Interactive General Sibling Demo"
+  penId="RNaoEmw"
+/>
+
+**Challenge:** Try changing the CSS rule from `h3 ~ span` to `h3 + span`. You will see the styling disappear completely because the `p` tag is immediately following the `h3`, breaking the *adjacent* requirement.
\ No newline at end of file
diff --git a/docs/css/selectors/pseudo-classes.mdx b/docs/css/selectors/pseudo-classes.mdx
index e345ed2..f6bb8f5 100644
--- a/docs/css/selectors/pseudo-classes.mdx
+++ b/docs/css/selectors/pseudo-classes.mdx
@@ -1 +1,99 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: Pseudo Classes
+description: "Learn how to use Pseudo-Classes (:) to style elements based on their state (e.g., hover, active, checked) or their position within the HTML structure (e.g., first-child, nth-child)."
+keywords: [CSS Pseudo-Classes, colon selector, element state, structural pseudo-classes, user interaction, CSS Selectors, CodeHarborHub]
+sidebar_label: Pseudo-Classes
+---
+
+**Pseudo-Classes** are special selectors used to define a specific **state** of an element or select elements based on their **position** in the HTML structure. They allow you to apply styles that don't depend on the explicit presence of a class or ID in the HTML.
+
+Pseudo-classes are indicated by a **single colon (`:`)** followed by the name of the pseudo-class.
+
+<AdsComponent />
+<br />
+
+## State Pseudo-Classes (User Interaction)
+
+These are the most common pseudo-classes. They allow you to change the appearance of an element based on user interaction or the element's current condition.
+
+| Pseudo-Class | Description | Example Use Case |
+| :--- | :--- | :--- |
+| `:hover` | The element is being hovered over by the cursor. | Change button background when the mouse is over it. |
+| `:active` | The element is clicked or pressed by the user. | Briefly change a link color while it's being clicked. |
+| `:focus` | The element has keyboard focus (e.g., inputs, links). | Add a visible outline to an input field when a user types in it. |
+| `:visited` | A link (`<a>`) that the user has already visited. | Change the color of already-visited links. |
+| `:link` | An unvisited link (`<a>`). | Set the initial color of links. |
+| `:checked` | A radio button or checkbox is selected. | Style a checkbox label when the box is checked. |
+
+### Example: Styling a Button State
+
+```css title="styles.css"
+/* Base style for the button */
+.my-button {
+  background-color: #3498db;
+  color: white;
+  padding: 10px 20px;
+  transition: background-color 0.3s; /* Smooth visual change */
+}
+
+/* Style when the user hovers over the button */
+.my-button:hover {
+  background-color: #2980b9; /* Slightly darker */
+}
+
+/* Style when the user is actively clicking the button */
+.my-button:active {
+  background-color: #e74c3c; /* Red color flash */
+}
+```
+
+<AdsComponent />
+<br />
+
+## Structural Pseudo-Classes (Position)
+
+These selectors target elements based on their placement or numerical order within a parent container.
+
+### Simple Position Selectors
+
+These are useful for targeting the beginning or end of a sequence of elements.
+
+| Selector | Description | Example Use Case |
+| :--- | :--- | :--- |
+| `:first-child` | Selects the element if it is the very first child of its parent. | Remove the top margin from the first paragraph in a container. |
+| `:last-child` | Selects the element if it is the very last child of its parent. | Remove the bottom border from the last item in a list. |
+| `:only-child` | Selects the element if it is the sole child of its parent. | Center a menu only if it has just one link. |
+
+### The `nth` Selectors
+
+The `nth-child()` and `nth-of-type()` pseudo-classes are extremely powerful as they accept an argument to create complex patterns.
+
+| Selector | Argument | Description |
+| :--- | :--- | :--- |
+| `:nth-child(n)` | `odd`, `even`, `2n`, `3n+1` | Selects elements based on their position among **all siblings**, regardless of tag type. |
+| `:nth-of-type(n)` | `odd`, `even`, `2n` | Selects elements based on their position among **siblings of the same type (tag)**. |
+
+:::tip `nth-child` vs. `nth-of-type`
+Use **`:nth-of-type()`** when you want to style every other element of the *same tag* (e.g., alternating colors for table rows, `tr:nth-of-type(odd)`).
+Use **`:nth-child()`** when the element must be in a specific numerical position relative to *all* children, even if they are different tags.
+:::
+
+## Specificity Score
+
+Pseudo-Classes have the same medium specificity as **Class and Attribute Selectors**.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Pseudo-Classes** | **(0, 0, 1, 0)** |
+
+A score of **10** means they can combine effectively with classes without creating specificity nightmares.
+
+
+## Interactive Pseudo-Class Demo
+
+In this demo, observe how `:hover` changes the button color and how `:nth-child` creates a zebra-stripe pattern on the list items.
+
+<CodePenEmbed 
+  title="Interactive Pseudo-Class Demo"
+  penId="yyOVrgV"
+/>
diff --git a/docs/css/selectors/pseudo-elements.mdx b/docs/css/selectors/pseudo-elements.mdx
index e345ed2..402b6de 100644
--- a/docs/css/selectors/pseudo-elements.mdx
+++ b/docs/css/selectors/pseudo-elements.mdx
@@ -1 +1,78 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: Pseudo Elements
+description: "Learn how to use Pseudo-Elements (::) to style specific parts of an element, or insert decorative content before or after an element's main content."
+keywords: [CSS Pseudo-Elements, ::before, ::after, ::first-line, ::first-letter, Content Generation, CSS Selectors, CodeHarborHub]
+sidebar_label: Pseudo-Elements
+---
+
+**Pseudo-elements** allow you to style a specific, defined part of an element without needing to add extra HTML tags. They are essentially **fake elements** that exist purely in the CSS and are crucial for subtle styling and generating decorative content.
+
+Unlike **Pseudo-classes** (which we'll cover next) that style an element based on its *state* (`:hover`), Pseudo-elements style a *part* of an element (`::first-line`) or *insert* content (`::before`).
+
+<AdsComponent />
+<br />
+
+## The Syntax: Double Colon (`::`)
+
+Pseudo-elements are written using a **double colon (`::`)** prefix. While older browsers accepted a single colon (`:`) for historical compatibility, the double colon is the **standard syntax** today, ensuring a clear distinction from pseudo-classes.
+
+### The Standard Syntax
+
+```css title="Pseudo-Element Syntax"
+selector::pseudo-element {
+  property: value;
+}
+```
+
+## The Four Main Pseudo-Elements
+
+The most common and useful pseudo-elements fall into two groups: **Structural** and **Content-Generating**.
+
+### 1. Content-Generating Pseudo-Elements (`::before` and `::after`)
+
+These are the most powerful pseudo-elements. They insert decorative content **before** or **after** the actual content of the selected element.
+
+  * **Crucial Rule:** They must always contain the `content` property, even if the value is empty (`content: "";`).
+
+| Pseudo-Element | Purpose | Example |
+| :--- | :--- | :--- |
+| `::before` | Inserts content or decoration **before** the element's main content. | `p::before { content: "💬 "; }` |
+| `::after` | Inserts content or decoration **after** the element's main content. | `.note::after { content: " *"; }` |
+
+**Common Uses:**
+
+  * Adding quotation marks or decorative icons to list items.
+  * Creating clean visual effects (like borders or triangles) using empty content.
+
+### 2. Structural Pseudo-Elements
+
+These target specific text portions of the element to apply unique typographical styling.
+
+| Pseudo-Element | Purpose | Example |
+| :--- | :--- | :--- |
+| `::first-letter` | Styles the **first letter** of the first line of a block-level element. | `h1::first-letter { font-size: 3em; }` |
+| `::first-line` | Styles the **first line** of a block-level element's text. (Note: The line length adjusts with the browser window size.) | `p::first-line { font-style: italic; }` |
+
+<AdsComponent />
+<br />
+
+## Specificity Score
+
+Pseudo-elements have the same medium specificity as **Class Selectors** and **Attribute Selectors**.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Pseudo-Element** | **(0, 0, 1, 0)** |
+
+A score of **10** means they easily override Element Selectors but are overruled by ID Selectors.
+
+## Interactive Pseudo-Elements Demo
+
+This demo shows `::first-letter` styling the initial letter and `::before` adding a decorative icon.
+
+<CodePenEmbed 
+  title="Interactive Pseudo-Elements Demo"
+  penId="PwNbgXq"
+/>
+
+**Challenge:** In the CSS panel, change `p::before` to `p::after` and observe where the "»" symbol moves.
diff --git a/docs/css/selectors/simple/class.mdx b/docs/css/selectors/simple/class.mdx
index e345ed2..24d82a7 100644
--- a/docs/css/selectors/simple/class.mdx
+++ b/docs/css/selectors/simple/class.mdx
@@ -1 +1,94 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Class Selector
+description: "Master the Class Selector (.), the most common and versatile way to target multiple specific HTML elements for styling, offering a great balance of specificity and reusability."
+keywords: [CSS Class Selector, Dot Selector, Reusable Styles, Medium Specificity, CSS Simple Selectors, CodeHarborHub]
+sidebar_label: Class Selector
+---
+
+The **Class Selector** is the workhorse of CSS. It allows you to target a specific group of elements, regardless of their HTML tag type (like `p`, `div`, or `h2`), making your styles highly reusable and easy to manage.
+
+If the Element Selector is for default, global styling, the Class Selector is for defining a distinct **design component** or **behavior** that can be applied multiple times across your page.
+
+<AdsComponent />
+<br />
+
+## How to Use the Class Selector
+
+Using a class involves two steps:
+
+### 1. Assign the Class in HTML
+
+First, you add the `class` attribute to one or more HTML elements. You can assign the same class to any number of elements.
+
+```html title="index.html"
+<p class="warning">Error: Check your input fields.</p>
+<div class="warning">Attention required.</div>
+<button class="warning">Close Warning</button>
+````
+
+### 2. Select the Class in CSS
+
+In your stylesheet, you target that class name by prefixing it with a **dot (`.`)**.
+
+```css title="styles.css"
+/* The dot (.) tells the browser: "Find the element with this class name." */
+.warning {
+  border: 2px solid #ff9800; /* Amber border */
+  background-color: #fff3e0; /* Light orange background */
+  padding: 10px;
+  color: #e65100; /* Darker orange text */
+}
+```
+
+Every element assigned the class `warning` will instantly inherit these styles.
+
+### Multiple Classes
+
+An HTML element can have **multiple classes** assigned to it, separated by spaces. This is incredibly powerful for mixing and matching styles.
+
+```html
+<button class="btn btn-primary btn-large">Save Data</button>
+```
+
+In your CSS, you would define these as separate, reusable rules:
+
+```css
+/* Base button style */
+.btn { 
+  cursor: pointer; 
+  border-radius: 4px; 
+} 
+
+/* Color/variant style */
+.btn-primary { 
+  background-color: blue; 
+  color: white; 
+} 
+
+/* Size style */
+.btn-large { 
+  padding: 15px 30px; 
+}
+```
+
+## Specificity Score
+
+The Class Selector has a **medium Specificity score**. It is much more specific than an Element selector, but less specific than an ID selector.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Class** | **(0, 0, 1, 0)** |
+
+This score of `10` makes it the ideal selector for component styling because it's specific enough to override default element styles but low enough that you can easily override it with utility classes or more advanced selectors if needed.
+
+<AdsComponent />
+<br />
+
+## Interactive Class Selector Demo
+
+In this demo, the CSS targets the class `.highlight`. Notice how the `div` and the `p` tags are styled the same way because they share the class, while the regular `p` tag is ignored.
+
+<CodePenEmbed 
+  title="Interactive Class Selector Demo"
+  penId="MYyjpLB"
+/>
diff --git a/docs/css/selectors/simple/element.mdx b/docs/css/selectors/simple/element.mdx
index e345ed2..af0c02e 100644
--- a/docs/css/selectors/simple/element.mdx
+++ b/docs/css/selectors/simple/element.mdx
@@ -1 +1,79 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Element Selector
+description: "Learn how to use the Element Selector (Type Selector) to target all instances of a specific HTML tag, forming the basis of CSS styling."
+keywords: [CSS Element Selector, Type Selector, HTML Tag Selector, Low Specificity, CSS Simple Selectors, CodeHarborHub]
+sidebar_label: Element Selector
+---
+
+The **Element Selector**, also known as the **Type Selector**, is the most fundamental and least specific way to target elements in CSS.
+
+It selects **all instances** of a specific HTML tag on your webpage. This selector is perfect for applying broad, default styles to common elements like paragraphs, headings, or list items.
+
+<AdsComponent />
+<br />
+
+## How to Use the Element Selector
+
+The syntax is straightforward: you simply use the **name of the HTML tag** as your selector.
+
+### The Syntax
+
+```css title="Element Selector Syntax"
+tagname {
+  /* declarations go here */
+}
+```
+
+### Examples
+
+| Selector | Targets |
+| :--- | :--- |
+| `h1` | All `<h1>` elements. |
+| `p` | All `<p>` (paragraph) elements. |
+| `a` | All `<a>` (anchor/link) elements. |
+| `li` | All `<li>` (list item) elements. |
+
+### Example Ruleset
+
+This ruleset applies a base font size and margin to every paragraph on the page:
+
+```css
+p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 1em;
+}
+
+h2 {
+  color: #007bff;
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 5px;
+}
+```
+
+
+## Specificity Score
+
+The Element Selector has the **lowest possible Specificity score** (excluding the Universal Selector).
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Element/Type** | **(0, 0, 0, 1)** |
+
+This low score means it is easily **overridden** by any other selector, such as a Class (score 10) or an ID (score 100). This is a desired trait, as element selectors are meant to provide the **default base styles**.
+
+:::tip Base Styling
+Always use the Element Selector for **base styles** or **reset styles**. For instance, setting a default `font-family` on the `body` tag, or setting `margin: 0;` on all `p` tags. This establishes a clean foundation that more specific rules can easily customize.
+:::
+
+<AdsComponent />
+<br />
+
+## Interactive Element Selector Demo
+
+In the live editor, the CSS targets the `div` and `p` elements. Notice how every instance of those tags is affected.
+
+<CodePenEmbed 
+  title="Interactive Element Selector Demo"
+  penId="qEZarPv"
+/>
\ No newline at end of file
diff --git a/docs/css/selectors/simple/grouping.mdx b/docs/css/selectors/simple/grouping.mdx
index e345ed2..61fc1ec 100644
--- a/docs/css/selectors/simple/grouping.mdx
+++ b/docs/css/selectors/simple/grouping.mdx
@@ -1 +1,103 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Grouping Selector
+description: "Learn how to use the Grouping Selector (comma-separated list) to apply the exact same styles to multiple, different selectors in a single, efficient CSS ruleset."
+keywords: [CSS Grouping Selector, Comma Selector, CSS Efficiency, Code Duplication, Simple Selectors, CodeHarborHub]
+sidebar_label: Grouping Selector
+---
+
+So far, we've focused on styling one element or one type of element at a time. But what if you have ten different elements that all need the **exact same style**?
+
+The **Grouping Selector** provides the perfect solution. It allows you to combine multiple selectors into a single ruleset, drastically reducing code duplication and making your CSS much cleaner.
+
+<AdsComponent />
+<br />
+
+## How to Use the Grouping Selector
+
+To group selectors, you simply list them one after another, separated by a **comma (`,`)**.
+
+### The Syntax
+
+```css title="Grouping Selector Syntax"
+selector-1, selector-2, selector-3, ... {
+  /* declarations go here */
+}
+```
+
+### Examples
+
+You can group any combination of simple selectors:
+
+| Grouping Example | Targets |
+| :--- | :--- |
+| `h1, h2, h3` | All level 1, 2, and 3 headings. |
+| `.card, .modal, .toast` | All elements with the classes `card`, `modal`, or `toast`. |
+| `p, #footer, .note` | All paragraphs, the unique element with `id="footer"`, and all elements with the class `note`. |
+
+### Grouping in Action
+
+Instead of writing this verbose, repetitive code:
+
+<Tabs>
+<TabItem value="verbose" label="Repetitive Code">
+
+```css
+h1 {
+  font-family: 'Poppins', sans-serif;
+  color: #333;
+}
+h2 {
+  font-family: 'Poppins', sans-serif;
+  color: #333;
+}
+.sidebar-title {
+  font-family: 'Poppins', sans-serif;
+  color: #333;
+}
+```
+
+</TabItem>
+<TabItem value="clean" label="Grouped Code">
+
+```css
+/* Grouping all three selectors together */
+h1, h2, .sidebar-title {
+  font-family: 'Poppins', sans-serif;
+  color: #333;
+}
+```
+
+</TabItem>
+</Tabs>
+
+The grouped code achieves the exact same result using just one ruleset\!
+
+<AdsComponent />
+<br />
+
+## Why Grouping is a Best Practice
+
+1.  **Reduced Code Size (Efficiency):** It minimizes the total number of lines in your stylesheet, which makes the file size smaller and faster to download.
+2.  **Maintainability:** If you need to update the shared styles (e.g., change the font-family), you only have one place to make the edit.
+3.  **Readability:** It makes the intent of your CSS clear—you are explicitly stating that these distinct elements are meant to look alike.
+
+### Note on Specificity
+
+When selectors are grouped, the browser calculates the **Specificity Score** for **each individual selector** separately.
+
+**Example:**
+If you have the rule: `.box, #unique-title { color: purple; }`
+
+  * When styling the element with the class `.box`, the specificity is **10**.
+  * When styling the element with the ID `#unique-title`, the specificity is **100**.
+
+The Grouping Selector does **not** change the individual power of the selectors it contains.
+
+### Interactive Grouping Selector Demo
+
+In the live editor, the CSS uses the grouping selector to target a Class, an Element, and a unique ID all at once. If you remove any selector from the comma-separated list, the corresponding element will lose the styling.
+
+<CodePenEmbed 
+  title="Interactive Grouping Selector Demo"
+  penId="MYybKmv"
+/>
\ No newline at end of file
diff --git a/docs/css/selectors/simple/id.mdx b/docs/css/selectors/simple/id.mdx
index e345ed2..0ce3473 100644
--- a/docs/css/selectors/simple/id.mdx
+++ b/docs/css/selectors/simple/id.mdx
@@ -1 +1,71 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The ID Selector
+description: "Understand the ID Selector (#), its unique nature, and its extremely high specificity. Learn why it is generally reserved for JavaScript and structural targeting, not widespread styling."
+keywords: [CSS ID Selector, Hash Selector, Unique Element, High Specificity, CSS Simple Selectors, CodeHarborHub]
+sidebar_label: ID Selector
+---
+
+The **ID Selector** is the most powerful simple selector you can use for styling. It is designed to target **one, and only one, unique element** on an entire HTML page.
+
+Due to its high specificity, the ID Selector is often considered too powerful for general styling and is usually reserved for structural landmarks or elements that need specific manipulation by **JavaScript**.
+
+<AdsComponent />
+<br />
+
+## How to Use the ID Selector
+
+Using the ID selector also requires two steps, similar to the class selector, but with a strict limitation on usage.
+
+### 1. Assign the ID in HTML
+
+You add the `id` attribute to an HTML element. **Crucially, the value of the `id` attribute must be unique.** You cannot reuse the same ID on another element on the page.
+
+```html title="index.html"
+<header id="main-header">
+  <h1>CodeHarborHub</h1>
+</header>
+
+<p>This is standard content.</p> 
+```
+
+### 2. Select the ID in CSS
+
+In your stylesheet, you target that unique ID name by prefixing it with a **hash symbol (`#`)** (also known as a pound sign).
+
+```css title="styles.css"
+/* The hash (#) tells the browser: "Find the single element with this ID." */
+#main-header {
+  background-color: #3f51b5; /* Deep Indigo */
+  color: white; 
+  padding: 20px 0;
+  text-align: center;
+}
+```
+
+## Specificity Score: The Atomic Bomb of CSS
+
+The ID Selector has an extremely high Specificity score, which is why it should be used sparingly for styling.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **ID** | **(0, 1, 0, 0)** |
+
+A score of **100** means an ID selector will override *ten* class selectors or *one hundred* element selectors trying to style the same property\!
+
+:::danger Use IDs with Caution
+Because the ID selector is so specific, using it for general styling can make your CSS fragile and difficult to maintain. It makes it very hard to override that style later without resorting to the forbidden power of `!important`.
+
+**General Rule:** Use **Classes** for styling and **IDs** primarily for structural landmarks or targets for **JavaScript functions** (e.g., scrolling to `#contact-form`).
+:::
+
+<AdsComponent />
+<br />
+
+## Interactive ID Selector Demo
+
+In this demo, observe how the ID selector (`#unique-style`) completely overrides the styles applied by the less specific Class selector (`.base-box`), even though the class rule is written *after* the ID rule in the code panel.
+
+<CodePenEmbed 
+  title="Interactive ID Selector Demo"
+  penId="vEGyNaa"
+/>
diff --git a/docs/css/selectors/simple/universal.mdx b/docs/css/selectors/simple/universal.mdx
index e345ed2..fe59233 100644
--- a/docs/css/selectors/simple/universal.mdx
+++ b/docs/css/selectors/simple/universal.mdx
@@ -1 +1,89 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The Universal Selector
+description: "Learn how to use the Universal Selector (*) to target every single element on a web page, and why it is primarily used for global CSS resets."
+keywords: [CSS Universal Selector, Asterisk Selector, Global Targeting, CSS Reset, Low Specificity, CSS Simple Selectors, CodeHarborHub]
+sidebar_label: Universal Selector
+---
+
+The **Universal Selector** is the simplest and broadest selector in CSS. It is represented by a single **asterisk (`*`)** and does exactly what its name suggests: it targets **every single element** on the HTML page.
+
+This includes all tags like `<body>`, `<div>`, `p`, `img`, and even hidden elements like `<head>` content.
+
+<AdsComponent />
+<br />
+
+## How to Use the Universal Selector
+
+The syntax is just the asterisk, followed by the declaration block.
+
+### The Syntax
+
+```css title="Universal Selector Syntax"
+* {
+  /* declarations go here */
+}
+```
+
+### Example: The CSS Reset
+
+The Universal Selector is most commonly used to perform a **CSS Reset**. This involves clearing default browser styles (like margins and padding) that can cause inconsistencies between different web browsers.
+
+```css title="styles.css"
+/* This essential rule removes default padding and margin from every element */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; /* Crucial for box model consistency! */
+}
+```
+
+## Specificity Score and Performance
+
+The Universal Selector has the lowest specificity score of all selectors.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Universal** | **(0, 0, 0, 0)** |
+
+### Performance and Caution
+
+:::danger Use Sparingly!
+Due to the way browsers calculate styles, using the Universal Selector (`*`) for general styling (like setting a background color) is generally discouraged for large sites.
+
+While modern browsers are fast, applying complex styles to *every single element* (including tags you didn't even know existed) can be slightly inefficient. **Only use it for global resets.**
+:::
+
+<AdsComponent />
+<br />
+
+## Best Use Case: The `box-sizing` Rule
+
+The most famous and beneficial use of the Universal Selector is to enforce consistent box model behavior across your entire site.
+
+In standard CSS, when you set an element's `width`, padding and border are *added* to that width, often resulting in unexpected layouts. By setting `box-sizing: border-box;`, the padding and border are instead *included* within the defined width.
+
+This single ruleset is often included at the very top of professional stylesheets:
+
+```css title="styles.css"
+/* 1. Target EVERYTHING */
+* {
+  box-sizing: border-box; 
+  margin: 0; 
+  padding: 0;
+}
+
+/* 2. Target pseudo-elements, which often need the same reset */
+*::before, 
+*::after {
+  box-sizing: border-box;
+}
+```
+
+## Interactive Universal Selector Demo
+
+In this demo, the universal selector (`*`) styles every element you see, while a slightly more specific Element Selector (`p`) overrides only the paragraph text color.
+
+<CodePenEmbed 
+  title="Interactive Universal Selector Demo"
+  penId="LENbGYr"
+/>
\ No newline at end of file