Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
type, href, data-*, or any custom attribute. Super powerful for forms and links! 🎯/* Select elements WITH an attribute */
[attr] { }
/* Select elements with EXACT value */
[attr="value"] { }
/* Select elements with value in list */
[attr~="value"] { }Element has the attribute (any value)
Example:
[disabled]Matches:
<button disabled>Attribute equals exact value
Example:
[type="text"]Matches:
<input type="text">Value in space-separated list
Example:
[class~="active"]Matches:
<div class="btn active">Starts with value followed by hyphen
Example:
[lang|="en"]Matches:
<html lang="en-US">Attribute starts with value
Example:
[href^="https"]Matches:
<a href="https://...">Attribute ends with value
Example:
[href$=".pdf"]Matches:
<a href="file.pdf">Attribute contains value anywhere
Example:
[href*="google"]Matches:
<a href="https://google.com"><!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🎯 Attribute Selectors</h1>
<div class="section">
<div class="label">[type="..."] - Different input types</div>
<input type="text" placeholder="Text input (purple border)" required>
<input type="email" placeholder="Email input (green border)" required>
<input type="text" placeholder="Disabled input" disabled>
</div>
<div class="section">
<div class="label">[href^="https"] - Secure links with 🔒</div>
<a href="https://example.com">Secure HTTPS Link</a>
<a href="http://example.com">Regular HTTP Link</a>
</div>
<div class="section">
<div class="label">[href$=".pdf"] - PDF links with 📄</div>
<a href="document.pdf">Download PDF</a>
<a href="page.html">Regular HTML Link</a>
</div>
<div class="section">
<div class="label">[href*="google"] - Contains "google"</div>
<a href="https://google.com">Google Homepage</a>
<a href="https://youtube.com">YouTube</a>
</div>
<div class="section">
<div class="label">[data-priority] - Custom data attributes</div>
<div data-priority="high">⚠️ High Priority Task</div>
<div data-priority="low">✅ Low Priority Task</div>
</div>
</div>
</body>
</html>Loading preview...
Form Input Types
Style different input types
input[type="email"]External Links
Target external links
a[href^="http"]File Types
Style PDF/ZIP links
a[href$=".pdf"]Required Fields
Highlight required inputs
input[required]Disabled Elements
Style disabled state
[disabled]Data Attributes
Custom attribute states
[data-state="active"]Language
Target language variants
[lang|="en"]Search Links
Links containing "search"
a[href*="search"]Add i flag for case-insensitive matching!
/* Case-sensitive (default) */
[href$=".PDF"] { } /* Only matches .PDF */
/* Case-insensitive with 'i' flag */
[href$=".pdf" i] { } /* Matches .pdf, .PDF, .Pdf */Perfect for file extensions and search terms!