Bird
Raised Fist0
CSSmarkup~30 mins

Attribute selectors in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Styling Links with Attribute Selectors in CSS
📖 Scenario: You are creating a simple webpage with several links. Some links open in a new tab, and others open in the same tab. You want to style these links differently using CSS attribute selectors.
🎯 Goal: Build a webpage with multiple links and use CSS attribute selectors to style links that open in a new tab with a green color and underline, and links that open in the same tab with a blue color and no underline.
📋 What You'll Learn
Create an HTML skeleton with at least four links.
Use the target attribute to specify which links open in a new tab.
Write CSS using attribute selectors to style links with target="_blank" differently from those without this attribute.
Ensure the page is accessible and uses semantic HTML.
💡 Why This Matters
🌍 Real World
Web developers often need to style elements differently based on their attributes, such as links opening in new tabs or buttons with specific data attributes.
💼 Career
Understanding attribute selectors is essential for front-end developers to write clean, efficient CSS that targets elements precisely without adding extra classes or IDs.
Progress0 / 4 steps
1
Create the HTML structure with links
Create an HTML file with a <main> section containing four <a> links. Two links should have the attribute target="_blank" and two should not have the target attribute. Use these exact URLs and link texts:
<a href="https://example.com" target="_blank">Example New Tab</a>,
<a href="https://openai.com" target="_blank">OpenAI New Tab</a>,
<a href="https://wikipedia.org">Wikipedia Same Tab</a>,
<a href="https://github.com">GitHub Same Tab</a>.
CSS
Hint

Remember to add the target="_blank" attribute exactly for two links and omit it for the other two.

2
Add a CSS style block with base link styles
Inside the <head> section, add a <style> block. Inside it, write CSS to set all <a> links to have a font size of 1.2rem and a margin of 0.5rem on the right. Use the selector a.
CSS
Hint

Use the selector a and set font-size and margin-right properties.

3
Use attribute selectors to style links opening in a new tab
In the existing <style> block, add a CSS rule using the attribute selector a[target="_blank"]. Set the text color to green and add an underline with text-decoration: underline.
CSS
Hint

Use the attribute selector a[target="_blank"] to style links that open in a new tab.

4
Style links without the target attribute differently
In the same <style> block, add a CSS rule using the attribute selector a:not([target]). Set the text color to blue and remove underline with text-decoration: none.
CSS
Hint

Use the negation pseudo-class :not([target]) to select links without the target attribute.

Practice

(1/5)
1. What does the CSS attribute selector [type="text"] select?
easy
A. All elements with a class named "text"
B. All elements with an attribute type equal to "text"
C. All elements with an ID named "text"
D. All elements that contain the word "text" anywhere

Solution

  1. Step 1: Understand attribute selector syntax

    The selector [type="text"] targets elements that have an attribute named type with the exact value "text".

  2. Step 2: Differentiate from class and ID selectors

    Class selectors use a dot (.) and ID selectors use a hash (#), so this selector is not for class or ID.

  3. Final Answer:

    All elements with an attribute type equal to "text" -> Option B

  4. Quick Check:

    Attribute selector = exact attribute match [OK]
Hint: Attribute selectors match exact attribute values [OK]
Common Mistakes:
  • Confusing attribute selector with class or ID selectors
  • Thinking it matches partial attribute values
  • Assuming it selects elements containing the word anywhere
2. Which of the following is the correct CSS syntax to select all input elements with a placeholder attribute?
easy
A. input[placeholder]
B. input.placeholder
C. input#placeholder
D. input(placeholder)

Solution

  1. Step 1: Identify attribute selector syntax

    To select elements with a specific attribute regardless of value, use [attribute]. So input[placeholder] selects all input elements with a placeholder attribute.

  2. Step 2: Eliminate incorrect syntax

    input.placeholder selects inputs with class "placeholder"; input#placeholder selects input with ID "placeholder"; input(placeholder) is invalid CSS syntax.

  3. Final Answer:

    input[placeholder] -> Option A

  4. Quick Check:

    Attribute presence selector = [attribute] [OK]
Hint: Use square brackets for attribute presence [OK]
Common Mistakes:
  • Using dot or hash instead of square brackets
  • Trying to use parentheses for attributes
  • Confusing attribute selectors with class or ID selectors
3. Given the CSS rule a[href^="https"] { color: green; } and the HTML below, which links will appear green?

<a href="https://example.com">Link 1</a>
<a href="http://example.com">Link 2</a>
<a href="https://secure.com">Link 3</a>
<a href="ftp://example.com">Link 4</a>
medium
A. Only Link 1
B. Link 2 and Link 4
C. Link 1 and Link 3
D. All links

Solution

  1. Step 1: Understand the attribute selector [href^="https"]

    The caret (^) means "starts with". This selector matches a elements whose href attribute starts with "https".

  2. Step 2: Check each link's href value

    Link 1: "https://example.com" starts with "https" - matches.
    Link 2: "http://example.com" starts with "http" - no.
    Link 3: "https://secure.com" starts with "https" - matches.
    Link 4: "ftp://example.com" starts with "ftp" - no.

  3. Final Answer:

    Link 1 and Link 3 -> Option C

  4. Quick Check:

    ^ means starts with = Link 1 & 3 green [OK]
Hint: ^ means attribute value starts with given string [OK]
Common Mistakes:
  • Confusing ^ with $ or * in attribute selectors
  • Assuming partial match anywhere instead of start
  • Ignoring exact string case sensitivity
4. The CSS below is intended to select all img elements with an alt attribute ending with ".jpg". Why does it not work?

img[alt*=".jpg"] { border: 2px solid red; }

What is the correct fix?
medium
A. Change *= to $= to match the end of the attribute
B. Change *= to ^= to match the start of the attribute
C. Add quotes around the selector like "img[alt*='.jpg']"
D. Use img[alt~='.jpg'] to match the word

Solution

  1. Step 1: Understand attribute selector operators

    *= means "contains" anywhere, $= means "ends with", ^= means "starts with".

  2. Step 2: Match attribute ending with ".jpg"

    Since we want to select elements whose alt attribute ends with ".jpg", we must use $= instead of *=.

  3. Final Answer:

    Change *= to $= to match the end of the attribute -> Option A

  4. Quick Check:

    $= means ends with [OK]
Hint: Use $= to select attributes ending with a value [OK]
Common Mistakes:
  • Using *= which matches anywhere, not just the end
  • Confusing ^= (start) with $= (end)
  • Adding quotes incorrectly around selectors
5. You want to style all button elements that have a data-action attribute starting with "save" but only if the attribute value is exactly "save" or starts with "save-" (like "save-draft"). Which CSS selector correctly achieves this?
hard
A. button[data-action$="save"], button[data-action^="save-"]
B. button[data-action^="save"]
C. button[data-action*="save"]
D. button[data-action="save"], button[data-action^="save-"]

Solution

  1. Step 1: Understand the requirement

    We want buttons where data-action is exactly "save" OR starts with "save-".

  2. Step 2: Choose selectors for exact and prefix matches

    [data-action="save"] matches exactly "save".
    [data-action^="save-"] matches values starting with "save-".
    Combining with a comma selects both sets.

  3. Step 3: Analyze other options

    [data-action^="save"] matches any value starting with "save", including "savegame" which is not desired.
    [data-action*="save"] matches anywhere "save" appears, too broad.
    [data-action$="save"] matches values ending with "save", not what we want.

  4. Final Answer:

    button[data-action="save"], button[data-action^="save-"] -> Option D

  5. Quick Check:

    Exact match + prefix with dash = button[data-action="save"], button[data-action^="save-"] [OK]
Hint: Combine exact and prefix selectors with comma for precise matches [OK]
Common Mistakes:
  • Using only prefix selector which matches unwanted values
  • Using contains (*) selector which is too broad
  • Confusing $= (ends with) with ^= (starts with)