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.