Attribute selectors in CSS - Browser Rendering Trace

Render Flow - Attribute selectors

[Parse CSS] -> [Identify attribute selectors] -> [Match elements with attributes] -> [Apply styles to matched elements] -> [Recalculate layout if needed] -> [Paint changes] -> [Composite layers]

The browser reads CSS, finds attribute selectors, matches HTML elements with those attributes, applies styles, then repaints the page visually.

Render Steps - 2 Steps

Code Added:li[data-type="fruit"] { color: green; font-weight: bold; }

Before

[li] Apple
[li] Carrot
[li] Banana
[li] Water

→

After

[li] Apple (green, bold)
[li] Carrot
[li] Banana (green, bold)
[li] Water

Only list items with data-type="fruit" get green color and bold text.

🔧 Browser Action:Matches elements with attribute data-type="fruit" and applies styles, triggers repaint.

Code Sample

List items with data-type="fruit" become green and bold; all items with data-type attribute become italic; items without data-type remain normal.

CSS

<ul>
  <li data-type="fruit">Apple</li>
  <li data-type="vegetable">Carrot</li>
  <li data-type="fruit">Banana</li>
  <li>Water</li>
</ul>

CSS

li[data-type="fruit"] {
  color: green;
  font-weight: bold;
}

li[data-type] {
  font-style: italic;
}

Render Quiz - 3 Questions

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

A All list items

B Only items with data-type="fruit"

C Only items with data-type attribute

D No items

Common Confusions - 2 Topics

Why doesn't my style apply to elements without the attribute?

Attribute selectors only match elements that have the specified attribute. If an element lacks it, the style won't apply. For example, in step 2, 'Water' has no data-type attribute, so it stays normal.

💡 Only elements with the attribute appear styled; others remain unchanged.

Why do some elements get italic but not green?

The selector [data-type] matches any element with the attribute, applying italic (step 2). The selector [data-type="fruit"] matches only those with value 'fruit', applying green and bold (step 1). So vegetables get italic but not green.

💡 More specific attribute selectors override or add styles to matching elements.

Property Reference

Selector	What It Matches	Visual Effect	Common Use
[attr]	Elements with attribute 'attr'	Applies styles to any element having the attribute	Highlight elements with a specific attribute
[attr="value"]	Elements with attribute 'attr' exactly equal to 'value'	Styles elements matching exact attribute value	Target elements with specific attribute values
[attr~="value"]	Elements with attribute 'attr' containing word 'value'	Styles elements where attribute contains a word	Match space-separated attribute values
[attr^="value"]	Elements with attribute 'attr' starting with 'value'	Styles elements whose attribute starts with value	Match prefixes in attribute values
[attr$="value"]	Elements with attribute 'attr' ending with 'value'	Styles elements whose attribute ends with value	Match suffixes in attribute values
[attr*="value"]	Elements with attribute 'attr' containing 'value'	Styles elements whose attribute contains value anywhere	Match substrings in attribute values

Concept Snapshot

Attribute selectors style elements based on attributes. [data-attr] matches elements with the attribute. [data-attr="value"] matches exact attribute values. They let you style elements without classes or IDs. Useful for targeting custom data attributes or states.