Starts-with and ends-with selectors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all links whose href attribute starts with 'https'.

CSS

a[href[1]="https"] { color: blue; }

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

A$=

B*=

C^=

D~=

Attempts:

3 left

💡 Hint

Common Mistakes

Using $= which matches the end of the attribute value instead of the start.

Using *= which matches anywhere in the attribute value.

The ^= selector matches elements whose attribute value starts with the specified string.

2fill in blank

medium

Complete the code to select all images whose src attribute ends with '.png'.

CSS

img[src[1]=".png"] { 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 matches the start of the attribute value instead of the end.

Using *= which matches anywhere in the attribute value.

The $= selector matches elements whose attribute value ends with the specified string.

3fill in blank

hard

Fix the error in the selector to select inputs whose name attribute starts with 'user'.

CSS

input[name[1]="user"] { background-color: yellow; }

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

A^=

B*=

C$=

D~=

Attempts:

3 left

💡 Hint

Common Mistakes

Using *= which matches anywhere in the attribute value.

Using $= which matches the end of the attribute value.

The ^= selector correctly matches attribute values that start with the given string.

4fill in blank

hard

Fill both blanks to select all links whose href attribute starts with 'http' and ends with '.com'.

CSS

a[href[1]="http"][href[2]=".com"] { text-decoration: underline; }

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

A^=

B*=

C$=

D|=

Attempts:

3 left

💡 Hint

Common Mistakes

Using *= for both blanks which matches anywhere in the attribute value.

Mixing up start and end selectors.

Use ^= to match the start and $= to match the end of the attribute value.

5fill in blank

hard

Fill all three blanks to select all input elements whose type attribute starts with 'text', contains 'pass', and ends with 'word'.

CSS

input[type[1]="text"][type[2]="pass"][type[3]="word"] { font-weight: bold; }

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

A^=

B*=

C$=

D~=

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong selector symbols for the intended match.

Confusing contains (*=) with starts ( ^= ) or ends ( $= ).

Use ^= for starts with, *= for contains, and $= for ends with selectors.