CSS Attribute Selectors

Attribute selectors allow you to target HTML elements based on their attributes (like title, href, type, etc.) or specific values of those attributes. This provides a precise way to style elements without adding extra classes.

---

The [attribute="value"] Selector

Targets elements with a specific attribute that has an exact value.

/* Only targets text inputs */
input[type="text"] {
    border-left: 5px solid green;
}

---

The [attribute~="value"] Selector

Targets elements with an attribute value containing a specific word (separated by spaces).

[class~="highlight"] {
    background-color: yellow;
}

---

Matching Substrings

You can target elements based on whether their attribute value starts with, ends with, or contains a string.

1. Starts with: [attribute^="value"]

The ^= selector targets values beginning with a specified string (often used for targeting protocols like https or mailto).

2. Ends with: [attribute$="value"]

The $= selector targets values ending with a specified string (useful for styling file extensions).

3. Contains: [attribute*="value"]

The *= selector targets values that contain the specified string anywhere within the value.

---

/* Starts with 'https' */
a[href^="https"] { color: green; }

/* Ends with '.pdf' */
a[href$=".pdf"] { text-decoration: underline wavy red; }

/* Contains 'example' anywhere */
[title*="example"] { background-color: #e8f5e9; }

---