Attribute Selectors

All in one: every attribute selector, side by side

What this example compares

The two basic forms: [disabled] (present) vs [type="checkbox"] (exactly), and [required] vs [required="required"]
How you write it: [required] vs input[required], and quotes vs no quotes
One tag, many looks: input[type="email"], "password", "date", "text", "checkbox", "submit", [required], [disabled]
The matching operators: = vs ^= vs $= vs *= on the same five links
Words inside a value: [class="card"] vs [class~="card"] vs .card vs [class*="card"], and [lang="en"] vs [lang|="en"]
Capital letters: .pdf vs .PDF vs the i flag vs [HREF]
Marking links: arrows, PDF badges, envelope and phone with ::after vs ::before
State and data: [checked], [aria-expanded="true"], [data-status] with attr()
Which kind of selector: input.email vs input#email vs input[type="email"] vs input:email, and specificity

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see nine panels. In panel 1 both disabled controls and the checkbox are outlined, but [required="required"] outlines only one of its two boxes while [required] outlines both. In panel 2 the textarea drops out under input[required], and card e (no quotes round two words) outlines nothing. Panel 3 shows nine <input> boxes styled nine ways without a single class; the "no type" box stays grey. In panel 4 the = card outlines nothing, ^= three links, $= one and *="lpu" two. Panel 5 outlines 1, 2, 2 and 3 class samples, then 1 and 2 language samples. Panel 6 shows that only the i card catches all three PDF links. Panel 7 shows an arrow, a red PDF badge, an envelope and a phone. Panel 8 colours the three status rows green, orange and red with their labels, and panel 9 outlines only the attribute card, then a green and a purple box. This page has no JavaScript, so the Console stays empty.

Quick check: a link has href="https://lpu.in/fees.PDF". Which of these outline it: a[href^="https"], a[href$=".pdf"], a[href$=".pdf" i]?

a[href^="https"] and a[href$=".pdf" i]. The href starts with https, so ^= matches. It ends in .PDF in capitals, and values are case-sensitive, so plain $=".pdf" misses it; the i flag ignores case and catches it.