Testing attribute selectors from JavaScript
~= matches whole words in a space-separated list; *= matches any piece of text, so it also finds notebook.
Attribute selectors match elements by their attributes: whether an attribute exists, equals a value, or starts with, ends with or contains some text, optionally ignoring upper and lower case.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Give every external link (starting with http) a small arrow after it, and every mailto: link an italic style.
Style every input that has a placeholder with a grey border, and every input with type="password" with letter spacing of 2px.
Explain it without notes
List the attribute selector operators and what each one matches.
What is the difference between [class~="note"], [class*="note"] and [class="note"]?
Why is it a good idea to style [aria-expanded="true"] instead of an .is-open class?
How do you match a link to a PDF whatever the case of the file extension?
Preview
Console
Nothing logged yet.Expected console output
a[href$=".pdf"] 1
a[href$=".pdf" i] 2
[class~="note"] 1
[class*="note"] 2
p[lang|="en"] 1
input[required] 1
[placeholder] 2