css - Attribute Selectors Part 3: Substring Matching Attribute Selectors

These selectors allow matching substrings within attribute values.

Types:

[attribute^="value"] - Starts with.

[attribute$="value"] - Ends with.

[attribute*="value"] - Contains.

Examples:

Starts With

[src^="https://"] {

  border: 2px solid blue;

}

<img src="https://example.com/image.jpg">

<img src="http://example.com/image.jpg">

<!-- Only the first image gets styled -->

Ends With

[href$=".pdf"] {

  color: red;

}

<a href="document.pdf">PDF Document</a>

<a href="document.docx">Word Document</a>

<!-- Only the PDF link is styled -->

Contains

[href*="secure"] {

  text-decoration: none;

}

<a href="https://secure.example.com">Secure Link</a>

<a href="https://example.com">Regular Link</a>

<!-- Only the first link is styled -->