Attribute selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an attribute selector in CSS?

An attribute selector lets you select HTML elements based on the presence or value of an attribute. For example, you can style all links with a specific href or all inputs with a certain type.

beginner

How do you select elements with a specific attribute regardless of its value?

Use the syntax [attribute]. For example, input[required] selects all input elements that have the required attribute, no matter its value.

intermediate

What does the selector a[href^='https'] do?

It selects all <a> elements whose href attribute value starts with https. The ^= means 'starts with'.

intermediate

Explain the difference between [attr$='value'] and [attr*='value'] selectors.

[attr$='value'] selects elements whose attribute ends with 'value'. [attr*='value'] selects elements whose attribute contains 'value' anywhere inside.

advanced

How can attribute selectors improve accessibility and user experience?

They allow styling elements based on attributes like aria-* or disabled, helping users understand element states visually. For example, styling disabled buttons differently.

Which CSS selector matches all input elements with a type attribute equal to "checkbox"?

A input[type^='checkbox']

B input[type$='checkbox']

C input[type='checkbox']

D input[type*='checkbox']

The selector input[type='checkbox'] matches inputs whose type attribute is exactly 'checkbox'.

What does the selector a[href$='.pdf'] select?

A All <code>&lt;a&gt;</code> elements with href starting with '.pdf'

B All <code>&lt;a&gt;</code> elements with href exactly '.pdf'

C All <code>&lt;a&gt;</code> elements with href containing '.pdf' anywhere

D All <code>&lt;a&gt;</code> elements with href ending with '.pdf'

The $= attribute selector matches attribute values that end with the given string.

Which selector matches elements with an attribute named 'data-info' regardless of its value?

A [data-info]

B [data-info='']

C [data-info^='']

D [data-info$='']

The selector [data-info] matches elements that have the 'data-info' attribute, no matter what its value is.

What does the selector input[required] do?

A Selects inputs with required attribute set to true

B Selects inputs with required attribute present, no matter the value

C Selects inputs with any value for required attribute

D Selects inputs without required attribute

The selector matches elements that have the 'required' attribute present, regardless of its value.

Which attribute selector matches elements whose attribute contains a specific word?

A [attr~='word']

B [attr$='word']

C [attr*='word']

D [attr^='word']

The [attr~='word'] selector matches elements whose attribute contains the word 'word' as a separate word, separated by spaces.

Describe how you would use CSS attribute selectors to style all links that open in a new tab.

Think about the attribute that controls opening links in new tabs.

Explain the difference between the attribute selectors [attr^='value'], [attr$='value'], and [attr*='value'].

Focus on where the value appears in the attribute.

Practice

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)