Links styled by where they go
The ::after part adds text after each PDF link; you'll learn pseudo-elements in Topic 1.6. Remove the i and the upper-case report loses its bold and label.
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.