Starts-with and ends-with selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS selector [attr^="value"] do?

It selects elements whose attribute attr value starts with the string value.

beginner

What does the CSS selector [attr$="value"] do?

It selects elements whose attribute attr value ends with the string value.

beginner

Give an example of a CSS rule using the starts-with selector to style links that start with "https".

[href^="https"] { color: green; }

This styles all links whose href attribute starts with "https" in green color.

beginner

How can you select all images with file names ending in ".png" using CSS?

img[src$=".png"] { border: 2px solid blue; }

This adds a blue border to all images whose src attribute ends with ".png".

intermediate

Why are starts-with and ends-with selectors useful in web design?

They let you style elements based on parts of attribute values, like URLs or file types, without adding extra classes or IDs. This keeps HTML clean and CSS flexible.

Which CSS selector matches elements with an attribute data-id starting with "user"?

A [data-id^="user"]

B [data-id$="user"]

C [data-id*="user"]

D [data-id="user"]

The ^ symbol means 'starts with', so [data-id^="user"] matches attributes starting with 'user'.

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

A Links with href exactly '.pdf'

B Links with href starting with '.pdf'

C Links with href containing '.pdf' anywhere

D Links with href ending with '.pdf'

The $ symbol means 'ends with', so it selects links whose href ends with '.pdf'.

Which selector would style all inputs with names ending in "_email"?

A input[name^="_email"]

B input[name*="_email"]

C input[name$="_email"]

D input[name="_email"]

The $ selector matches attributes ending with the given string.

If you want to select elements with an attribute containing a certain substring anywhere, which selector do you use?

A [attr$="value"]

B [attr*="value"]

C [attr^="value"]

D [attr="value"]

The * selector matches attributes containing the substring anywhere.

Can starts-with and ends-with selectors be used on any attribute?

A Yes, on any attribute

B No, only on class attributes

C No, only on id attributes

D No, only on href attributes

These selectors work on any attribute present on the element.

Explain how to use CSS attribute selectors to style elements based on the start or end of an attribute value.

Think about how you can target links or images by parts of their URLs.

Describe a real-life scenario where starts-with or ends-with selectors help keep your HTML clean and CSS efficient.

Consider how you might style different file types or URL patterns without changing HTML.