Attribute Selectors

Attribute selectors match elements based on the presence or value of their HTML attributes. They are wrapped in square brackets and offer powerful pattern matching.

Common Patterns

Syntax	Meaning
`[attr]`	Element has the attribute
`[attr="val"]`	Exact match
`[attr^="val"]`	Starts with
`[attr$="val"]`	Ends with
`[attr*="val"]`	Contains
`[attr~="val"]`	Word in space-separated list

Case Insensitivity

Add i before the closing bracket to match attribute values case-insensitively: [href$=".PDF" i].

Example

/* Any element with a disabled attribute */
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Input type="text" exactly */
input[type="text"] {
    border: 2px solid #1a73e8;
    border-radius: 4px;
    padding: 6px 10px;
}

/* Links opening in a new tab */
a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.75em;
}

/* Links to PDF files (case-insensitive) */
a[href$=".pdf" i] {
    color: #b71c1c;
    font-weight: 600;
}

/* Any class containing "btn" */
[class*="btn"] {
    cursor: pointer;
    border-radius: 4px;
}

CSS

Full Editor

Pro Tip

Attribute selectors are ideal for styling third-party HTML you cannot modify — target elements by their existing attributes without adding extra classes.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned