HTML & CSS Interview Question #56

What are attribute selectors in CSS?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

Attribute selectors target elements based on the presence or value of HTML attributes. They can match exact values, word lists, prefixes, suffixes, substrings, and other attribute conditions.

Detailed Explanation

Attribute selectors target elements based on the presence or value of HTML attributes. They can match exact values, word lists, prefixes, suffixes, substrings, and other attribute conditions.

They are especially useful for styling form controls, links, data attributes, and state expressed through semantic attributes without adding extra classes solely for styling.

Code Example

input[type="email"] {
    width: 100%;
}

a[target="_blank"] {
    text-decoration-style: dotted;
}

[data-status="active"] {
    font-weight: 700;
}

a[href^="https://"] {
    padding-right: .25rem;
}