Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=0%

Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=

Intermediate10 min read•Updated: 2026-09-10

Study Materials Cheatsheet

Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=

Welcome to CSS for Intermediate (Level 2)! 🚀

In Level 1, you learned how to select elements by tag name (p), class name (.card), and ID (#header).

While classes are great, writing classes for every single variation quickly clutters your HTML: <input type="text" class="input input-text input-required input-disabled"> 😵

HTML tags already carry a treasure trove of information inside their attributes: type, href, target, disabled, required, download, and custom data-* attributes.

With CSS Attribute Selectors, you can directly target elements based on what attributes they possess or what text their attributes contain!

In this lesson, you will master:

1
Basic attribute presence selection ([disabled], [required])
2
Exact value matching ([type="email"])
3
The 3 powerful substring matching operators:

^= (Starts with)
$= (Ends with)
*= (Contains anywhere)

1
Case-insensitive matching with the i flag
2
Real-world UI patterns: Auto-styling PDF download links and custom form inputs

The School Library Roll-Call Analogy 📚

Imagine a school librarian searching the Student Admission Database:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  ATTRIBUTE SELECTORS IN A SCHOOL DATABASE               |
+-------------------------------------------------------------------------+
| 1. [scholarship]  (PRESENCE)                                            |
|    "Find all students who have a scholarship flag on their file,        |
|    regardless of the scholarship amount."                               |
|                                                                         |
| 2. [section="10-A"]  (EXACT MATCH)                                      |
|    "Find students whose class section is EXACTLY '10-A'."               |
|                                                                         |
| 3. [roll^="2026"]  (STARTS WITH: ^=)                                    |
|    "Find all students whose roll number starts with the year '2026'!"   |
|                                                                         |
| 4. [email$="@school.edu"]  (ENDS WITH: $=)                              |
|    "Find all users whose email ends with the official '@school.edu'     |
|    domain extension!"                                                   |
|                                                                         |
| 5. [subjects*="Bio"]  (CONTAINS: *=)                                    |
|    "Find any student who has 'Bio' anywhere in their subject list!"     |
+-------------------------------------------------------------------------+

1. Attribute Presence: `[attribute]`

Matches any element that simply has the specified attribute present, regardless of what its value is:

1/* Target any input that has the HTML 'required' attribute */
2input[required] {
3  border-left: 4px solid #ef4444; /* Red stripe indicating mandatory field */
4}
5 
6/* Target any button that is disabled */
7button[disabled] {
8  opacity: 0.5;
9  cursor: not-allowed;
10  background-color: #cbd5e1;
11}

1<!-- Automatically gets red left stripe with zero classes! -->
2<input type="text" name="student_name" required>
3 
4<!-- Automatically dimmed with not-allowed cursor -->
5<button disabled>Submit Registration</button>

2. Exact Value Matching: `[attribute="value"]`

Matches elements where the attribute value is an exact, character-for-character match:

1/* Style text inputs differently from password or checkbox inputs */
2input[type="text"],
3input[type="email"] {
4  width: 100%;
5  padding: 10px 14px;
6  border: 1px solid #cbd5e1;
7  border-radius: 6px;
8}
9 
10/* Style the submit button with brand blue */
11input[type="submit"] {
12  background-color: #2563eb;
13  color: white;
14  padding: 12px 24px;
15  border: none;
16  border-radius: 6px;
17  cursor: pointer;
18}

3. The 3 Substring Operators (`^=`, `$=`, `*=`)

Modern websites dynamically generate URLs and IDs. You often cannot predict the exact full string, but you know how it begins, ends, or what word it contains!

Operator A: Starts With (`^=`)

Matches when the attribute value begins with the specified string:

1/* Target all external secure HTTPS links */
2a[href^="https://"] {
3  color: #059669; /* Emerald Green */
4}
5 
6/* Target telephone links */
7a[href^="tel:"] {
8  color: #2563eb;
9  font-weight: bold;
10}

Operator B: Ends With (`$=`)

Matches when the attribute value ends with the specified string:

This is one of the most beloved tricks in professional web design: Automatically styling download file links by their extension!

1/* Style PDF document links */
2a[href$=".pdf"] {
3  color: #dc2626; /* Crimson Red */
4  font-weight: 600;
5}
6 
7/* Add a PDF emoji automatically after the link! */
8a[href$=".pdf"]::after {
9  content: " 📄 (PDF)";
10  font-size: 12px;
11}
12 
13/* Style Excel spreadsheet downloads */
14a[href$=".xlsx"],
15a[href$=".csv"] {
16  color: #16a34a; /* Excel Green */
17}
18 
19a[href$=".xlsx"]::after {
20  content: " 📊 (Excel)";
21  font-size: 12px;
22}

Operator C: Contains Anywhere (`*=`)

Matches when the specified string appears anywhere inside the attribute value:

1/* Highlight links leading anywhere to Google (google.com, drive.google.com, docs.google.com) */
2a[href*="google"] {
3  text-decoration-color: #ea4335;
4}
5 
6/* Target elements with class names containing 'icon-' */
7[class*="icon-"] {
8  display: inline-flex;
9  align-items: center;
10}

4. Case-Insensitive Matching with the `i` Flag

By default, attribute values in CSS can be case-sensitive depending on the attribute. If a user uploads a file with .PDF in uppercase, a[href$=".pdf"] might fail!

To force case-insensitive matching, add the i modifier before the closing bracket:

1/* Matches .pdf, .PDF, .Pdf, or .pDf! */
2a[href$=".pdf" i] {
3  color: #dc2626;
4}

Attribute Selectors Quick Reference Table 📊

Selector	Meaning	Example	Real-World Use Case
`[attr]`	Attribute is present	`input[disabled]`	Styling disabled form controls
`[attr="val"]`	Exact match	`input[type="radio"]`	Styling radio buttons
`[attr^="val"]`	Starts with	`a[href^="https://"]`	Styling external secure links
`[attr$="val"]`	Ends with	`a[href$=".pdf"]`	Auto-detecting document downloads
`[attr*="val"]`	Contains anywhere	`a[href*="youtube"]`	Video link badges
`[attr~="val"]`	Space-separated word	`[data-tags~="maths"]`	Filtering custom tag lists
`[attr="val" i]`	Case-insensitive	`a[href$=".jpg" i]`	Catching both `.jpg` and `.JPG`

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Writing `input[required="true"]`	HTML boolean attributes like `required` or `disabled` do not need a value.	Just write `input[required]` or `button[disabled]`.
Confusing `^=` (starts with) and `$=` (ends with)	Writing `a[href^=".pdf"]` looks for links starting with `.pdf`, matching zero URLs!	Use `$=` for file extensions: `a[href$=".pdf"]`.
Forgetting quotes around URLs with special characters	While simple values work without quotes, values with slashes (`https://`) can cause parsing errors.	Always wrap attribute values in quotes: `[href^="https://"]`.
Not adding the `i` flag for file extensions	Misses downloads ending with capital `.PDF` or `.PNG`.	Add `i`: `a[href$=".pdf" i]`.

Summary Cheat Sheet 📌

Attribute selectors target HTML elements directly by their attributes without polluting markup with extra classes.
[attr] checks presence; [attr="val"] checks exact equality.
The Substring Trio:
^= = Starts with (href^="https://")
$= = Ends with (href$=".pdf")
*`=** = Contains anywhere (href*="portal"`)
i modifier: Makes substring comparison case-insensitive.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

Which CSS selector selects all hyperlink elements whose href attribute ends with .pdf?

Question 2

What does the caret symbol (^=) signify in an attribute selector like a[href^="https://"]?

Question 3

How do you ensure that a file extension selector matches both .pdf and uppercase .PDF?

Question 4

Which of the following is the cleanest way to style all required form input fields with a red border without adding classes?

Question 5

What does the asterisk (*=) operator match in a[href*="wikipedia"]?

Practice Challenge (Try It Yourself)

1
Create an HTML file named school-downloads-center.html.
2
Build an attractive school downloads center where links automatically receive appropriate brand colors and icons based entirely on attribute selectors:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Downloads Center | Attribute Selectors Lab</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f8fafc;
       padding: 40px 20px;
       max-width: 650px;
       margin: 0 auto;
     }
14 
     .card {
       background-color: white;
       padding: 30px;
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0,0,0,0.06);
     }
21 
     h2 {
       color: #0f172a;
       margin-top: 0;
       border-bottom: 2px solid #e2e8f0;
       padding-bottom: 10px;
     }
28 
     .download-list {
       list-style: none;
       padding: 0;
       margin: 20px 0;
     }
34 
     .download-list li {
       padding: 12px 16px;
       border-bottom: 1px solid #f1f5f9;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
42 
     .download-list a {
       text-decoration: none;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: opacity 0.2s;
     }
51 
     .download-list a:hover {
       opacity: 0.8;
     }
55 
     /* 1. PDF Links: Red accent + PDF badge */
     a[href$=".pdf" i] {
       color: #dc2626;
     }
60 
     a[href$=".pdf" i]::after {
       content: "PDF Document";
       font-size: 11px;
       background-color: #fee2e2;
       color: #991b1b;
       padding: 3px 8px;
       border-radius: 4px;
       font-weight: bold;
     }
70 
     /* 2. Excel / CSV Links: Green accent + Excel badge */
     a[href$=".xlsx" i],
     a[href$=".csv" i] {
       color: #16a34a;
     }
76 
     a[href$=".xlsx" i]::after,
     a[href$=".csv" i]::after {
       content: "Excel Sheet";
       font-size: 11px;
       background-color: #dcfce7;
       color: #166534;
       padding: 3px 8px;
       border-radius: 4px;
       font-weight: bold;
     }
87 
     /* 3. External Secure HTTPS Links: Blue accent */
     a[href^="https://"] {
       color: #2563eb;
     }
92 
     /* 4. Required Inputs: Automatic Orange Accent Stripe */
     .form-section {
       margin-top: 30px;
       border-top: 2px dashed #e2e8f0;
       padding-top: 20px;
     }
99 
     input[type="text"] {
       width: 100%;
       padding: 10px;
       margin-bottom: 12px;
       border: 1px solid #cbd5e1;
       border-radius: 6px;
       box-sizing: border-box;
     }
108 
     /* Mandatory field highlighting */
     input[required] {
       border-left: 5px solid #f59e0b;
       background-color: #fffbeb;
     }
   </style>
 </head>
 <body>
   <div class="card">
     <h2>DPS School Resource Downloads</h2>
     <ul class="download-list">
       <li>
         <span>Class 10 Physics Syllabus 2026</span>
         <a href="downloads/physics-syllabus.pdf">Download</a>
       </li>
       <li>
         <span>Term 1 Examination Marksheet Template</span>
         <a href="downloads/marksheet-template.xlsx">Download</a>
       </li>
       <li>
         <span>Annual Sports Day Registration Form</span>
         <a href="downloads/sports-registration.PDF">Download</a>
       </li>
       <li>
         <span>CBSE Official Academic Portal</span>
         <a href="https://cbse.gov.in" target="_blank">Visit Site ↗</a>
       </li>
     </ul>
137 
     <div class="form-section">
       <h3>Student Verification Portal</h3>
       <p style="font-size: 13px; color: #64748b;">
         Notice how the required field automatically displays an amber left stripe!
       </p>
       <input type="text" placeholder="Roll Number (Required)" required>
       <input type="text" placeholder="Optional Guardian Mobile">
     </div>
   </div>
 </body>
 </html>

1
Open this file in your browser to observe how attribute selectors automatically decorate different file types with zero redundant class names! 🎯

Next Lesson

Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
None	Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=

Intermediate10 min read•Updated: 2026-09-10

Study Materials Cheatsheet

Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=

Welcome to CSS for Intermediate (Level 2)! 🚀

In Level 1, you learned how to select elements by tag name (p), class name (.card), and ID (#header).

While classes are great, writing classes for every single variation quickly clutters your HTML: <input type="text" class="input input-text input-required input-disabled"> 😵

HTML tags already carry a treasure trove of information inside their attributes: type, href, target, disabled, required, download, and custom data-* attributes.

With CSS Attribute Selectors, you can directly target elements based on what attributes they possess or what text their attributes contain!

In this lesson, you will master:

1
Basic attribute presence selection ([disabled], [required])
2
Exact value matching ([type="email"])
3
The 3 powerful substring matching operators:

^= (Starts with)
$= (Ends with)
*= (Contains anywhere)

1
Case-insensitive matching with the i flag
2
Real-world UI patterns: Auto-styling PDF download links and custom form inputs

The School Library Roll-Call Analogy 📚

Imagine a school librarian searching the Student Admission Database:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  ATTRIBUTE SELECTORS IN A SCHOOL DATABASE               |
+-------------------------------------------------------------------------+
| 1. [scholarship]  (PRESENCE)                                            |
|    "Find all students who have a scholarship flag on their file,        |
|    regardless of the scholarship amount."                               |
|                                                                         |
| 2. [section="10-A"]  (EXACT MATCH)                                      |
|    "Find students whose class section is EXACTLY '10-A'."               |
|                                                                         |
| 3. [roll^="2026"]  (STARTS WITH: ^=)                                    |
|    "Find all students whose roll number starts with the year '2026'!"   |
|                                                                         |
| 4. [email$="@school.edu"]  (ENDS WITH: $=)                              |
|    "Find all users whose email ends with the official '@school.edu'     |
|    domain extension!"                                                   |
|                                                                         |
| 5. [subjects*="Bio"]  (CONTAINS: *=)                                    |
|    "Find any student who has 'Bio' anywhere in their subject list!"     |
+-------------------------------------------------------------------------+

1. Attribute Presence: `[attribute]`

Matches any element that simply has the specified attribute present, regardless of what its value is:

1/* Target any input that has the HTML 'required' attribute */
2input[required] {
3  border-left: 4px solid #ef4444; /* Red stripe indicating mandatory field */
4}
5 
6/* Target any button that is disabled */
7button[disabled] {
8  opacity: 0.5;
9  cursor: not-allowed;
10  background-color: #cbd5e1;
11}

1<!-- Automatically gets red left stripe with zero classes! -->
2<input type="text" name="student_name" required>
3 
4<!-- Automatically dimmed with not-allowed cursor -->
5<button disabled>Submit Registration</button>

2. Exact Value Matching: `[attribute="value"]`

Matches elements where the attribute value is an exact, character-for-character match:

1/* Style text inputs differently from password or checkbox inputs */
2input[type="text"],
3input[type="email"] {
4  width: 100%;
5  padding: 10px 14px;
6  border: 1px solid #cbd5e1;
7  border-radius: 6px;
8}
9 
10/* Style the submit button with brand blue */
11input[type="submit"] {
12  background-color: #2563eb;
13  color: white;
14  padding: 12px 24px;
15  border: none;
16  border-radius: 6px;
17  cursor: pointer;
18}

3. The 3 Substring Operators (`^=`, `$=`, `*=`)

Modern websites dynamically generate URLs and IDs. You often cannot predict the exact full string, but you know how it begins, ends, or what word it contains!

Operator A: Starts With (`^=`)

Matches when the attribute value begins with the specified string:

1/* Target all external secure HTTPS links */
2a[href^="https://"] {
3  color: #059669; /* Emerald Green */
4}
5 
6/* Target telephone links */
7a[href^="tel:"] {
8  color: #2563eb;
9  font-weight: bold;
10}

Operator B: Ends With (`$=`)

Matches when the attribute value ends with the specified string:

This is one of the most beloved tricks in professional web design: Automatically styling download file links by their extension!

1/* Style PDF document links */
2a[href$=".pdf"] {
3  color: #dc2626; /* Crimson Red */
4  font-weight: 600;
5}
6 
7/* Add a PDF emoji automatically after the link! */
8a[href$=".pdf"]::after {
9  content: " 📄 (PDF)";
10  font-size: 12px;
11}
12 
13/* Style Excel spreadsheet downloads */
14a[href$=".xlsx"],
15a[href$=".csv"] {
16  color: #16a34a; /* Excel Green */
17}
18 
19a[href$=".xlsx"]::after {
20  content: " 📊 (Excel)";
21  font-size: 12px;
22}

Operator C: Contains Anywhere (`*=`)

Matches when the specified string appears anywhere inside the attribute value:

1/* Highlight links leading anywhere to Google (google.com, drive.google.com, docs.google.com) */
2a[href*="google"] {
3  text-decoration-color: #ea4335;
4}
5 
6/* Target elements with class names containing 'icon-' */
7[class*="icon-"] {
8  display: inline-flex;
9  align-items: center;
10}

4. Case-Insensitive Matching with the `i` Flag

By default, attribute values in CSS can be case-sensitive depending on the attribute. If a user uploads a file with .PDF in uppercase, a[href$=".pdf"] might fail!

To force case-insensitive matching, add the i modifier before the closing bracket:

1/* Matches .pdf, .PDF, .Pdf, or .pDf! */
2a[href$=".pdf" i] {
3  color: #dc2626;
4}

Attribute Selectors Quick Reference Table 📊

Selector	Meaning	Example	Real-World Use Case
`[attr]`	Attribute is present	`input[disabled]`	Styling disabled form controls
`[attr="val"]`	Exact match	`input[type="radio"]`	Styling radio buttons
`[attr^="val"]`	Starts with	`a[href^="https://"]`	Styling external secure links
`[attr$="val"]`	Ends with	`a[href$=".pdf"]`	Auto-detecting document downloads
`[attr*="val"]`	Contains anywhere	`a[href*="youtube"]`	Video link badges
`[attr~="val"]`	Space-separated word	`[data-tags~="maths"]`	Filtering custom tag lists
`[attr="val" i]`	Case-insensitive	`a[href$=".jpg" i]`	Catching both `.jpg` and `.JPG`

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Writing `input[required="true"]`	HTML boolean attributes like `required` or `disabled` do not need a value.	Just write `input[required]` or `button[disabled]`.
Confusing `^=` (starts with) and `$=` (ends with)	Writing `a[href^=".pdf"]` looks for links starting with `.pdf`, matching zero URLs!	Use `$=` for file extensions: `a[href$=".pdf"]`.
Forgetting quotes around URLs with special characters	While simple values work without quotes, values with slashes (`https://`) can cause parsing errors.	Always wrap attribute values in quotes: `[href^="https://"]`.
Not adding the `i` flag for file extensions	Misses downloads ending with capital `.PDF` or `.PNG`.	Add `i`: `a[href$=".pdf" i]`.

Summary Cheat Sheet 📌

Attribute selectors target HTML elements directly by their attributes without polluting markup with extra classes.
[attr] checks presence; [attr="val"] checks exact equality.
The Substring Trio:
^= = Starts with (href^="https://")
$= = Ends with (href$=".pdf")
*`=** = Contains anywhere (href*="portal"`)
i modifier: Makes substring comparison case-insensitive.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

Which CSS selector selects all hyperlink elements whose href attribute ends with .pdf?

Question 2

What does the caret symbol (^=) signify in an attribute selector like a[href^="https://"]?

Question 3

How do you ensure that a file extension selector matches both .pdf and uppercase .PDF?

Question 4

Which of the following is the cleanest way to style all required form input fields with a red border without adding classes?

Question 5

What does the asterisk (*=) operator match in a[href*="wikipedia"]?

Practice Challenge (Try It Yourself)

1
Create an HTML file named school-downloads-center.html.
2
Build an attractive school downloads center where links automatically receive appropriate brand colors and icons based entirely on attribute selectors:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Downloads Center | Attribute Selectors Lab</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f8fafc;
       padding: 40px 20px;
       max-width: 650px;
       margin: 0 auto;
     }
14 
     .card {
       background-color: white;
       padding: 30px;
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0,0,0,0.06);
     }
21 
     h2 {
       color: #0f172a;
       margin-top: 0;
       border-bottom: 2px solid #e2e8f0;
       padding-bottom: 10px;
     }
28 
     .download-list {
       list-style: none;
       padding: 0;
       margin: 20px 0;
     }
34 
     .download-list li {
       padding: 12px 16px;
       border-bottom: 1px solid #f1f5f9;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
42 
     .download-list a {
       text-decoration: none;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: opacity 0.2s;
     }
51 
     .download-list a:hover {
       opacity: 0.8;
     }
55 
     /* 1. PDF Links: Red accent + PDF badge */
     a[href$=".pdf" i] {
       color: #dc2626;
     }
60 
     a[href$=".pdf" i]::after {
       content: "PDF Document";
       font-size: 11px;
       background-color: #fee2e2;
       color: #991b1b;
       padding: 3px 8px;
       border-radius: 4px;
       font-weight: bold;
     }
70 
     /* 2. Excel / CSV Links: Green accent + Excel badge */
     a[href$=".xlsx" i],
     a[href$=".csv" i] {
       color: #16a34a;
     }
76 
     a[href$=".xlsx" i]::after,
     a[href$=".csv" i]::after {
       content: "Excel Sheet";
       font-size: 11px;
       background-color: #dcfce7;
       color: #166534;
       padding: 3px 8px;
       border-radius: 4px;
       font-weight: bold;
     }
87 
     /* 3. External Secure HTTPS Links: Blue accent */
     a[href^="https://"] {
       color: #2563eb;
     }
92 
     /* 4. Required Inputs: Automatic Orange Accent Stripe */
     .form-section {
       margin-top: 30px;
       border-top: 2px dashed #e2e8f0;
       padding-top: 20px;
     }
99 
     input[type="text"] {
       width: 100%;
       padding: 10px;
       margin-bottom: 12px;
       border: 1px solid #cbd5e1;
       border-radius: 6px;
       box-sizing: border-box;
     }
108 
     /* Mandatory field highlighting */
     input[required] {
       border-left: 5px solid #f59e0b;
       background-color: #fffbeb;
     }
   </style>
 </head>
 <body>
   <div class="card">
     <h2>DPS School Resource Downloads</h2>
     <ul class="download-list">
       <li>
         <span>Class 10 Physics Syllabus 2026</span>
         <a href="downloads/physics-syllabus.pdf">Download</a>
       </li>
       <li>
         <span>Term 1 Examination Marksheet Template</span>
         <a href="downloads/marksheet-template.xlsx">Download</a>
       </li>
       <li>
         <span>Annual Sports Day Registration Form</span>
         <a href="downloads/sports-registration.PDF">Download</a>
       </li>
       <li>
         <span>CBSE Official Academic Portal</span>
         <a href="https://cbse.gov.in" target="_blank">Visit Site ↗</a>
       </li>
     </ul>
137 
     <div class="form-section">
       <h3>Student Verification Portal</h3>
       <p style="font-size: 13px; color: #64748b;">
         Notice how the required field automatically displays an amber left stripe!
       </p>
       <input type="text" placeholder="Roll Number (Required)" required>
       <input type="text" placeholder="Optional Guardian Mobile">
     </div>
   </div>
 </body>
 </html>

1
Open this file in your browser to observe how attribute selectors automatically decorate different file types with zero redundant class names! 🎯

Next Lesson

Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
None	Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=

The School Library Roll-Call Analogy 📚

1. Attribute Presence: [attribute]

2. Exact Value Matching: [attribute="value"]

3. The 3 Substring Operators (^=, $=, *=)

Operator A: Starts With (^=)

Operator B: Ends With ($=)

Operator C: Contains Anywhere (*=)

4. Case-Insensitive Matching with the i Flag

Attribute Selectors Quick Reference Table 📊

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Multiple Choice Questions

Practice Challenge (Try It Yourself)

Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Related Lessons

Practice Quiz

Loading Page Content...

Attribute Selectors: Targeting Elements with [attr], ^=, $=, and *=

The School Library Roll-Call Analogy 📚

1. Attribute Presence: [attribute]

2. Exact Value Matching: [attribute="value"]

3. The 3 Substring Operators (^=, $=, *=)

Operator A: Starts With (^=)

Operator B: Ends With ($=)

Operator C: Contains Anywhere (*=)

4. Case-Insensitive Matching with the i Flag

Attribute Selectors Quick Reference Table 📊

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Multiple Choice Questions

Practice Challenge (Try It Yourself)

Child, Descendant, and Sibling Selectors: Navigating the DOM Tree

Related Lessons

Practice Quiz

1. Attribute Presence: `[attribute]`

2. Exact Value Matching: `[attribute="value"]`

3. The 3 Substring Operators (`^=`, `$=`, `*=`)

Operator A: Starts With (`^=`)

Operator B: Ends With (`$=`)

Operator C: Contains Anywhere (`*=`)

4. Case-Insensitive Matching with the `i` Flag

1. Attribute Presence: `[attribute]`

2. Exact Value Matching: `[attribute="value"]`

3. The 3 Substring Operators (`^=`, `$=`, `*=`)

Operator A: Starts With (`^=`)

Operator B: Ends With (`$=`)

Operator C: Contains Anywhere (`*=`)

4. Case-Insensitive Matching with the `i` Flag