HTML & CSS - Mastery / CSS Selectors

Attribute selectors (select elements based on an attribute or attribute value)

✅ Types of Attribute Selectors

Syntax

Meaning

[attr]

Selects elements with the attribute

[attr="value"]

Selects elements where attribute exactly equals value

[attr~="value"]

Attribute contains a space-separated list, one of which is value

[attr^="value"]

Attribute value starts with value

[attr$="value"]

Attribute value ends with value

[attr*="value"]

Attribute value contains value anywhere

✅ Example Using Separate HTML and CSS

🖥️ Output Summary

  • The external link (with target="_blank") is red.

  • The email input has a blue border.

  • The .jpg image has a dashed green border.

  • The input with "name" in the placeholder has a light blue background.

🚀 Try and Play Around