Starts-with and ends-with selectors in CSS - Browser Rendering Trace

Render Flow - Starts-with and ends-with selectors

[Parse CSS selectors] -> [Match elements with attribute selectors] -> [Check attribute values] -> [Apply styles to matched elements] -> [Recalculate layout if needed] -> [Paint styles]

The browser reads the CSS selectors, finds elements whose attributes start or end with specific strings, applies the styles to those elements, then repaints the page.

Render Steps - 2 Steps

Code Added:li[data-name^="ap"] { color: green; font-weight: bold; }

Before

[Apple]
[Apricot]
[Banana]
[Grape]
[Pineapple]

→

After

[Apple] (green, bold)
[Apricot] (green, bold)
[Banana]
[Grape]
[Pineapple]

Items whose data-name starts with 'ap' are styled green and bold, so Apple and Apricot change visually.

🔧 Browser Action:Matches elements with attribute starting with 'ap', applies styles, triggers repaint.

Code Sample

List items starting with 'ap' in their data-name turn green and bold; items ending with 'ple' get a yellow background.

CSS

<ul>
  <li data-name="apple">Apple</li>
  <li data-name="apricot">Apricot</li>
  <li data-name="banana">Banana</li>
  <li data-name="grape">Grape</li>
  <li data-name="pineapple">Pineapple</li>
</ul>

CSS

li[data-name^="ap"] {
  color: green;
  font-weight: bold;
}

li[data-name$="ple"] {
  background-color: yellow;
}

Render Quiz - 3 Questions

After applying step 1, which list items are green and bold?

A Banana and Grape

B Apple and Apricot

C Pineapple only

D All items

Common Confusions - 2 Topics

Why doesn't the style apply if the attribute value contains the string but not at start or end?

The ^ and $ selectors only match the start or end of the attribute value exactly, not anywhere inside. For example, 'grape' contains 'ap' but not at the start, so it won't match [data-name^="ap"] (see step 1).

💡 Starts-with (^) matches only beginning; ends-with ($) matches only end.

Can these selectors match partial words inside the attribute?

No, they only check the start or end of the whole attribute value. To match anywhere inside, use *= selector (not covered here).

💡 Use *= for contains, ^ for starts-with, $ for ends-with.

Property Reference

Selector	Meaning	Visual Effect	Common Use
[attr^="value"]	Selects elements with attribute starting with 'value'	Applies styles to elements whose attribute begins with given string	Highlight items by prefix
[attr$="value"]	Selects elements with attribute ending with 'value'	Applies styles to elements whose attribute ends with given string	Highlight items by suffix

Concept Snapshot

Starts-with selector: [attr^="value"] matches elements whose attribute begins with 'value'. Ends-with selector: [attr$="value"] matches elements whose attribute ends with 'value'. They apply styles only if the attribute value exactly starts or ends with the string. Commonly used to style elements by attribute prefixes or suffixes. They trigger style recalculation and repaint when applied.