CSS Attribute Selectors - Detailed Overview

Introduction to CSS Attribute Selectors

CSS attribute selectors allow you to apply styles based on the presence or value of HTML attributes. This method provides greater flexibility in targeting elements without needing additional classes or IDs.

Examples of CSS Attribute Selectors

Below are examples of how to use various CSS attribute selectors:

a[href$=".pdf"] {
    color: green;
    font-weight: bold;
}

a[href^="https://"] {
    color: blue;
}

a[href*="example"] {
    color: red;
}

input[type="text"] {
    border: 2px solid #007bff;
    padding: 5px;
}

input[disabled] {
    background-color: #e9ecef;
}

[data-highlight="true"] {
    background-color: yellow;
}