Style a form and links by attribute – CSS Practice

Nothing on this page has a class. Use attribute selectors.

What to build

Four attribute-based rules.

Requirements

Inputs of type email have a font size of 20px.
Inputs with the required attribute have a 2px solid border.
Links whose address starts with https:// are teal.
Links whose address ends in .pdf are crimson, even if they start with https://.

Constraints

Do not change the HTML. Do not use classes or ids.

Example

a[href^="https://"] matches links that start with that text.

Why it works

Attributes already describe these elements, so the styles stay correct automatically when new links and inputs are added.

Hints

Hint 1

input[type="email"] matches on an exact value.

Hint 2

^= checks the start and $= checks the end.

Hint 3

[required] needs no value.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attr</title>
  <style>
    input[type="email"] { font-size: 20px; }
    input[required] { border: 2px solid black; }
    a[href^="https://"] { color: teal; }
    a[href$=".pdf"] { color: crimson; }
  </style>
</head>
<body>
  <input type="email" name="e" aria-label="Email" required>
  <input type="text" name="t" aria-label="Name">
  <a href="https://example.org/">Site</a>
  <a href="https://example.org/guide.pdf">Guide</a>
  <a href="/home">Home</a>
</body>
</html>

Lesson: Selectors: choosing what to style →