CSS Attribute Selectors

<form>
  <input type="text" placeholder="Full name" required>
  <input type="text" placeholder="Nickname">
  <input type="email" placeholder="Email" required>
  <input type="tel" placeholder="Phone number">
  <input type="submit" value="Submit">
</form>

Your task: Write a CSS rule using [required] to give all required inputs:

A 3px solid red left border
A light red background: #fff5f5
8px padding

Expected Output:

[ Full name  ] ← red left border + light red bg (has required)
[ Nickname   ] ← default border (no required)
[ Email      ] ← red left border + light red bg (has required)
[ Phone      ] ← default border (no required)
[ Submit     ] ← default (no required)

Self-check Questions:

Does the submit button get the red border? Why or why not?
What would happen if you changed [required] to input[required]? Would anything look different?
Add required to the phone number input · does it automatically get the red border?

Exercise 2: Exact Match · Style Link Destinations

Objective: Use [attribute="value"] to differentiate where links go.

Scenario: A news website navigation has links that either stay on the same page or open a new tab. You want all "new tab" links to have a distinct colour.

HTML to work with:

<nav>
  <a href="home.html">Home</a>
  <a href="about.html" target="_self">About</a>
  <a href="https://twitter.com" target="_blank">Twitter</a>
  <a href="https://facebook.com" target="_blank">Facebook</a>
  <a href="contact.html">Contact</a>
</nav>

Your task: Write a CSS rule that:

Targets all <a> elements with target="_blank"
Sets their colour to #e65100 (orange)
Sets font-weight: bold

Expected Output:

Home     ← default colour (no target attribute)
About    ← default colour (target="_self", not "_blank")
Twitter  ← ORANGE + bold (target="_blank")
Facebook ← ORANGE + bold (target="_blank")
Contact  ← default colour (no target attribute)

Exercise 3: Partial Match · File Type Indicators

Objective: Use $= to automatically style links by file type.

Scenario: A school resources page has links to different file types. You want each file type to look visually different so students know what they are downloading before clicking.

HTML:

<ul>
  <li><a href="chapter1.pdf">Chapter 1 Notes</a></li>
  <li><a href="worksheet.pdf">Worksheet</a></li>
  <li><a href="slides.pptx">Presentation Slides</a></li>
  <li><a href="data.xlsx">Grade Data</a></li>
  <li><a href="home.html">Go to Homepage</a></li>
</ul>

Your task:

Style links ending in .pdf → color: darkred
Style links ending in .pptx → color: darkorange
Style links ending in .xlsx → color: darkgreen
All styled links should also have font-weight: bold

Expected Output:

Chapter 1 Notes      ← DARK RED + bold (.pdf)
Worksheet            ← DARK RED + bold (.pdf)
Presentation Slides  ← DARK ORANGE + bold (.pptx)
Grade Data           ← DARK GREEN + bold (.xlsx)
Go to Homepage       ← normal (it's a .html file)

What-If Challenge: Add this rule too:

a[href$=".pdf"]::after {
  content: " 📄";
}

What does it add after every PDF link? Why is ::after useful here?

Exercise 4: Contains Selector · Icon Classes

Objective: Use *= to target elements that belong to a broad category.

Scenario: Your icon library uses class names like icon-home, icon-user, icon-settings, icon-bell. You want all icon elements to share the same base size without touching the HTML.

HTML:

<span class="icon-home">🏠</span>
<span class="icon-user">👤</span>
<span class="btn-primary">Submit</span>
<span class="icon-settings">⚙️</span>
<span class="icon-bell">🔔</span>
<span class="label-warning">Warning!</span>

Your task: Write ONE CSS rule using [class*="icon"] that gives all icon elements:

font-size: 24px
margin: 0 8px
cursor: pointer

Expected Output:

Section 8: Common Beginner Mistakes

🏠  👤  Submit  ⚙️  🔔  Warning!
↑ ↑ styled   ↑ ↑   ↑ not styled

(The "Submit" button and "Warning!" label are NOT targeted because their class does not contain "icon".)

Phase 9 of 9

Mistake 1: Forgetting the Square Brackets

The Problem:

/* WRONG — this is NOT an attribute selector */
input type="text" {
  background: yellow;
}

The Fix:

/* CORRECT — always wrap in square brackets */
input[type="text"] {
  background: yellow;
}

Mistake 2: Using `=` When You Need `~=` (or vice versa)

The Problem:

/* WRONG — if title="summer flower", this WON'T match because
   "summer flower" is not exactly equal to "flower" */
p[title="flower"] { color: red; }

The Fix:

/* CORRECT — use ~= to match "flower" as a whole word within the value */
p[title~="flower"] { color: red; }

Mistake 3: Confusing `^=` (starts with) and `|=` (starts with hyphen variant)

Both match values that start with a specific string, but they work differently:

/* |= "top" matches: "top" exactly OR "top-anything" (hyphen required!) */
/* DOES NOT match "topper" */
[class|="top"] { background: yellow; }

/* ^= "top" matches: anything that STARTS with "top" — "top", "topper", "top-text", all match */
[class^="top"] { background: yellow; }

Rule of thumb: If you need to match language codes or hyphenated naming conventions, use |=. For everything else (just "starts with"), use ^=.

Mistake 4: Thinking `*=` Requires Whole Words

The misconception: Some beginners think [class*="te"] only matches if "te" is a whole word.

The truth: *= matches any substring, including partial words:

/* This matches: "rate", "internet", "technology", "unite", "testing"
   — because ALL of them contain "te" as a substring, even inside other words */
[class*="te"] { background: yellow; }

If you want whole words only, use ~= instead.

Mistake 5: Putting a Space Between the Tag and the Bracket

The Problem:

/* WRONG — the space means "a descendant with [target]",
   NOT "an <a> that has [target]" */
a [target] { color: red; }

The Fix:

/* CORRECT — no space means the <a> itself has the target attribute */
a[target] { color: red; }

Critical rule: a[target] (no space) = select <a> elements that HAVE a target attribute. a [target] (with space) = select any element with target that is a DESCENDANT of an <a> element. These are completely different!

Mistake 6: Forgetting That Attribute Selectors Are Case-Sensitive by Default