Skip to content

Commit dd03bab

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #92 from codeharborhub/dev-1
Update: Complete CSS Selectors
2 parents b7545e2 + 99c2f5f commit dd03bab

File tree

12 files changed

+1129
-12
lines changed

12 files changed

+1129
-12
lines changed

‎docs/css/selectors/attribute-selectors.mdx‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,114 @@
1-
<ComingSoon />
1+
---
2+
title: Attribute Selectors
3+
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."
4+
keywords: [CSS Attribute Selectors, Attribute presence, Attribute value, Substring matching, CSS Selectors, CodeHarborHub]
5+
sidebar_label: Attribute Selectors
6+
---
7+
8+
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`).
9+
10+
This is incredibly useful for styling elements that share the same tag but have different functions (e.g., different input types).
11+
12+
<AdsComponent />
13+
<br />
14+
15+
## The Basic Syntax
16+
17+
Attribute selectors are always enclosed in **square brackets (`[]`)**.
18+
19+
### 1. Attribute Presence Selector `[attr]`
20+
21+
This is the simplest form. It selects any element that simply **has the specified attribute**, regardless of its value.
22+
23+
| Syntax | Example | Targets |
24+
| :--- | :--- | :--- |
25+
| **`[attr]`** | `[disabled]` | All elements that possess the **`disabled`** attribute, regardless of its value. |
26+
| **`a[title]`** | `a[title]` | All `<a>` tags that have a **`title`** attribute present. |
27+
| **`[attr="value"]`** | `[type="submit"]` | All elements where the `type` attribute value is **exactly `"submit"`**. |
28+
| **`a[target="_blank"]`** | `a[target="_blank"]` | All links that have the `target` attribute set **exactly to `"_blank"`**. |
29+
30+
```css title="Styles any input that is disabled, regardless of its type"
31+
input[disabled] {
32+
opacity: 0.6;
33+
cursor: not-allowed;
34+
}
35+
```
36+
37+
### 2. Exact Attribute Value Selector `[attr="value"]`
38+
39+
This selects any element that has the specified attribute **and** its value exactly matches the one provided.
40+
41+
| Syntax | Example | Targets |
42+
| :--- | :--- | :--- |
43+
| `[attr="value"]` | `[type="submit"]` | All elements whose `type` attribute is **exactly** `"submit"`. |
44+
| `a[target="_blank"]` | `a[target="_blank"]` | All anchor tags (`<a>`) whose `target` attribute is **exactly** `"_blank"` (opens in a new tab). |
45+
46+
```css title="Targets only submit buttons"
47+
input[type="submit"] {
48+
background-color: #28a745; /* Green */
49+
color: white;
50+
}
51+
```
52+
53+
<AdsComponent />
54+
<br />
55+
56+
## Substring Matching (Advanced Selectors)
57+
58+
CSS offers several specialized operators for matching only a *part* of the attribute's value.
59+
60+
| Operator | Syntax | Description | Specificity Score |
61+
| :--- | :--- | :--- | :--- |
62+
| **`~=`** | `[attr~="value"]` | Contains the whole **word** (`value`), separated by spaces. (e.g., `class="nav link"`, targets `link`) | (0, 0, 1, 0) |
63+
| **<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) |
64+
| **`^=`** | `[attr^="value"]` | **Starts with** the exact string (`value`). | (0, 0, 1, 0) |
65+
| **`$=`** | `[attr$="value"]` | **Ends with** the exact string (`value`). (e.g., targeting `.pdf` links) | (0, 0, 1, 0) |
66+
| **`*=`** | `[attr*="value"]` | **Contains** the exact string (`value`) **anywhere** in the attribute. | (0, 0, 1, 0) |
67+
68+
### Example: Targeting File Extensions
69+
70+
You can use the `$=` selector to target links that end with a specific file extension, like `.pdf`.
71+
72+
```css title="styles.css"
73+
/* Targets any link whose 'href' ends with '.pdf' */
74+
a[href$=".pdf"] {
75+
padding-right: 20px;
76+
background: url('/icons/pdf.png') no-repeat right center;
77+
}
78+
```
79+
80+
### Example: Targeting Partial Class Names
81+
82+
You can use `*=` to style elements whose class names contain a specific component, which is useful in utility frameworks.
83+
84+
```css
85+
/* Targets any element whose class contains the word 'btn-' */
86+
[class*="btn-"] {
87+
cursor: pointer;
88+
border-radius: 4px;
89+
}
90+
```
91+
92+
## Specificity Score
93+
94+
Attribute Selectors have the same medium specificity as **Class Selectors**.
95+
96+
| Selector Type | Specificity Score |
97+
| :--- | :--- |
98+
| **Attribute Selector** | **(0, 0, 1, 0)** |
99+
100+
A score of **10** means they easily override Element Selectors but can be overridden by ID Selectors.
101+
102+
<AdsComponent />
103+
<br />
104+
105+
## Interactive Attribute Selector Demo
106+
107+
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.
108+
109+
<CodePenEmbed
110+
title="Interactive Attribute Selector Demo"
111+
penId="OPNbqRE"
112+
/>
113+
114+
**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]`.

‎docs/css/selectors/combinators/adjacent-sibling.mdx‎

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,89 @@
1-
<ComingSoon />
1+
---
2+
title: The Adjacent Sibling Combinator
3+
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."
4+
keywords: [CSS Adjacent Sibling Combinator, Plus Selector, Immediate Follow, Sequential Styling, CSS Combinators, CodeHarborHub]
5+
sidebar_label: Adjacent Sibling Combinator
6+
---
7+
8+
We've explored selectors based on hierarchy (parent/child). Now we look at selectors based on **sequence**—elements that appear one after the other.
9+
10+
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).
11+
12+
It is represented by the **plus sign (`+`)**.
13+
14+
<AdsComponent />
15+
<br />
16+
17+
## How to Use the Adjacent Sibling Combinator
18+
19+
The rule is very strict: the second element must directly and immediately follow the first element in the HTML source code.
20+
21+
### The Syntax
22+
23+
```css title="Adjacent Sibling Combinator Syntax"
24+
preceding_selector + target_selector {
25+
/* styles applied ONLY to the target_selector */
26+
}
27+
```
28+
29+
* **`preceding_selector`**: The element that comes first (e.g., `h2`, `.callout`).
30+
* **`target_selector`**: The element that immediately follows the preceding element.
31+
32+
### Example: Spacing After a Heading
33+
34+
A very common use case is applying specific top margin or spacing to a paragraph *only* when it immediately follows a main heading.
35+
36+
<Tabs>
37+
<TabItem value="html" label="HTML Structure">
38+
39+
```html
40+
<div class="content">
41+
<h2>Main Section Title</h2> <p>First paragraph after the title.</p> <div>
42+
<p>Second paragraph (UNSTYLED)</p>
43+
</div>
44+
</div>
45+
```
46+
47+
</TabItem>
48+
<TabItem value="css" label="CSS Rule">
49+
50+
```css
51+
/* Targets ONLY a <p> that IMMEDIATELY follows an <h2> */
52+
h2 + p {
53+
margin-top: 30px; /* Extra space above the first paragraph */
54+
font-weight: bold;
55+
}
56+
```
57+
58+
</TabItem>
59+
</Tabs>
60+
61+
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>`.
62+
63+
<AdsComponent />
64+
<br />
65+
66+
## How it Relates to Flow
67+
68+
The Adjacent Sibling Combinator is a powerful tool for controlling the **vertical flow** of a document without relying on classes.
69+
70+
### Strict Sequential Requirement
71+
72+
Remember this rule: **there can be no other element or even a comment node between the two siblings.**
73+
74+
| HTML Sequence | CSS Rule: `h2 + p` | Result |
75+
| :--- | :--- | :--- |
76+
| `<h2>...</h2> <p>...</p>` | ✅ Match | The paragraph is styled. |
77+
| `<h2>...</h2> <div>...</div> <p>...</p>` | No Match | The `<div>` breaks the adjacency. |
78+
| `<h2>...</h2> <p>...</p>` | No Match | The comment node technically breaks the adjacency. |
79+
80+
## Interactive Adjacent Sibling Demo
81+
82+
In this demo, the CSS rule targets a list item (`<li>`) that immediately follows an element with the class `.header-item`.
83+
84+
<CodePenEmbed
85+
title="Interactive Adjacent Sibling Demo"
86+
penId="azNBPYK"
87+
/>
88+
89+
**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"?

‎docs/css/selectors/combinators/child.mdx‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,108 @@
1-
<ComingSoon />
1+
---
2+
title: The Child Combinator
3+
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."
4+
keywords: [CSS Child Combinator, Greater Than Selector, Direct Child, Immediate Nesting, CSS Combinators, CodeHarborHub]
5+
sidebar_label: Child Combinator
6+
---
7+
8+
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.
9+
10+
This selector is ideal when you need to style only the immediate children of a component and leave deeper nesting untouched.
11+
12+
<AdsComponent />
13+
<br />
14+
15+
## How to Use the Child Combinator
16+
17+
The Child Combinator is represented by the **greater-than sign (`>`)** placed between two selectors.
18+
19+
### The Syntax
20+
21+
```css
22+
/* Child Combinator Syntax */
23+
parent_selector > child_selector {
24+
/* styles applied ONLY to the immediate child_selector */
25+
}
26+
```
27+
28+
* **`parent_selector`**: The direct parent element (e.g., `.card`, `ul`).
29+
* **`child_selector`**: The element that must be the immediate child of the parent.
30+
31+
### Example
32+
33+
Imagine a list structure where you want to style only the top-level list items, but not any nested sub-lists.
34+
35+
<Tabs>
36+
<TabItem value="html" label="HTML Structure">
37+
38+
```html
39+
<ul class="main-menu">
40+
<li>Item 1</li>
41+
<li>
42+
Item 2
43+
<ul>
44+
<li>Sub-Item 2.1</li>
45+
</ul>
46+
</li>
47+
<li>Item 3</li>
48+
</ul>
49+
```
50+
51+
</TabItem>
52+
<TabItem value="css" label="CSS Rule">
53+
54+
```css
55+
/* Targets ONLY <li> elements that are IMMEDIATE children of .main-menu */
56+
.main-menu > li {
57+
font-weight: bold;
58+
color: #c2185b; /* Deep Pink */
59+
border-bottom: 1px solid #f8bbd0;
60+
}
61+
```
62+
63+
</TabItem>
64+
</Tabs>
65+
66+
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`.
67+
68+
<AdsComponent />
69+
<br />
70+
71+
## Child vs. Descendant (The Critical Difference)
72+
73+
Understanding the distinction between the two most common combinators is vital for writing robust CSS.
74+
75+
| Combinator | Syntax | Rule | Scope |
76+
| :--- | :--- | :--- | :--- |
77+
| **Descendant** | `A B` (Space) | Selects `B` nested **anywhere** inside `A`. | Broad and less strict. |
78+
| **Child** | `A > B` (Greater-than) | Selects `B` only if it is the **immediate child** of `A`. | Strict and specific (one level deep). |
79+
80+
### Visualizing the Difference
81+
82+
Consider the same HTML:
83+
84+
```html title="index.html"
85+
<div class="header">
86+
<p>Paragraph 1</p>
87+
<section>
88+
<p>Paragraph 2</p>
89+
</section>
90+
</div>
91+
```
92+
93+
| Selector | Targets | Why? |
94+
| :--- | :--- | :--- |
95+
| `.header p` | Paragraph 1 and 2 | The space targets **all** descendants. |
96+
| `.header > p` | Paragraph 1 **only** | The `>` targets only the immediate children. |
97+
98+
99+
## Interactive Child Combinator Demo
100+
101+
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.
102+
103+
<CodePenEmbed
104+
title="Interactive Child Combinator Demo"
105+
penId="pvyNpoy"
106+
/>
107+
108+
**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.

0 commit comments

Comments
 (0)