Attribute selectors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all <input> elements with a type attribute.

CSS

input[[1]] { color: blue; }

Drag options to blanks, or click blank then click option'

Atype

Bname

Cvalue

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using an attribute name that does not exist on the element.

Forgetting to put the attribute name inside square brackets.

The attribute selector [type] selects elements that have a type attribute, regardless of its value.

2fill in blank

medium

Complete the code to select all <a> elements whose href attribute value starts with 'https'.

CSS

a[[1]^="https"] { text-decoration: underline; }

Drag options to blanks, or click blank then click option'

Atitle

Bsrc

Calt

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong attribute name like 'src' or 'alt'.

Confusing the '^=' operator with other operators.

The selector [href^="https"] matches elements whose href attribute value starts with 'https'.

3fill in blank

hard

Fix the error in the code to select all <img> elements with an alt attribute containing the word 'logo'.

CSS

img[alt[1]="logo"] { border: 2px solid green; }

Drag options to blanks, or click blank then click option'

A~=

B*=

C$=

D^=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '^=' which means 'starts with' instead of 'contains'.

Using '$=' which means 'ends with' instead of 'contains'.

The '*=' operator selects elements whose attribute value contains the specified substring anywhere.

4fill in blank

hard

Fill both blanks to select all <input> elements whose name attribute ends with 'email' and have a required attribute.

CSS

input[[1]$="email"][[2]] { background-color: #ffefef; }

Drag options to blanks, or click blank then click option'

Aname

Btype

Crequired

Dplaceholder

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' instead of 'name' for the first attribute.

Forgetting to include the 'required' attribute selector.

The first selector uses '$=' to match attribute values ending with 'email'. The second selector checks for the presence of the 'required' attribute.

5fill in blank

hard

Fill all three blanks to create code that maps each data-id attribute value to the element's text content for all <div> elements with a data-role attribute containing 'user'.

CSS

const userData = Object.fromEntries(Array.from(document.querySelectorAll('div[data-role*="user"]'), [3] => [[1], [2].textContent]));

Drag options to blanks, or click blank then click option'

Ael.getAttribute('data-id')

Bel

Delement

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name in the loop.

Not using getAttribute to get the attribute value.

We use el.getAttribute('data-id') as the key, el.textContent as the value, and iterate over elements with variable 'el'.