❮ Previous

CSS Attribute Selectors

  • Learn CSS attribute selectors to style elements based on specific HTML attributes.

  • What Are CSS Attribute Selectors ?

    CSS Attribute Selectors let you style HTML elements by checking their attributes (like type, href, required, disabled) instead of relying only on classes or IDs.


    In simple words:

    Attribute selectors style elements by what they have, not by what they’re named.

    They are extremely useful when:

    You don’t want to add extra classes
    Elements already have meaningful attributes
    You are styling forms and inputs

    Why CSS Attribute Selectors Are Important

    Without attribute selectors:

    Extra classes everywhere
    Messy, bloated HTML
    Less reusable CSS

    With attribute selectors:

    Cleaner HTML
    Smarter, targeted styling
    Perfect control over forms & inputs

    Real-life comparison:
    Identifying people using ID cards instead of names.
    Attributes act like ID cards for HTML elements.

    Basic Attribute Selector Syntax

    element[attribute] {

      property: value;

    }

Attribute-Based Element Selection

The attribute selector targets elements based on the presence of a specific attribute. 

input[type] {
  border: 2px solid blue;
}

  • Selects all input elements that have a type attribute

    Types of CSS Attribute Selectors

    Attribute Exists Selector

    What it does:

    Selects elements that have a specific attribute, regardless of its value.

    Syntax:

    element[attribute]

Selecting Elements with Specific Attributes

The attribute selector targets elements that contain a specific attribute, such as required. 

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selector Example</title>
    <style>
        input[required] {
            border-color: red;
        }
    </style>
</head>
<body>
    <input type="text" required>
    <input type="email">
</body>
</html>

  • Only the required input is styled

    Real-life comparison:
    Only students wearing ID cards can enter the classroom.

    Attribute Value Selector

    What it does:

    Selects elements where the attribute value matches exactly.

    Syntax:

    element[attribute="value"]

Exact Attribute Value Selector

This selector targets elements where the attribute value matches exactly with the specified value. 

input[type="password"] {
  background-color: #f2f2f2;
}

  • Only password fields are styled

    Real-life comparison:
    Only staff badge holders can enter a restricted area.

    Attribute Value Starts With (^=)

    What it does:

    Selects elements whose attribute value starts with a specific string.

Attribute Starts With Selector (^=)

The ^= selector targets elements whose attribute value starts with a specified string. 

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

  • Secure links highlighted

    Real-life comparison:
    Phone numbers starting with a country code.

    Attribute Value Ends With ($=)

    What it does:

    Selects elements whose attribute value ends with a specific string.

Attribute Ends With Selector ($=)

The $= selector targets elements whose attribute value ends with a specified string. 

a[href$=".pdf"] {
  color: red;
}

  • PDF links styled differently

    Real-life comparison:
    Files ending with .pdf.

    Attribute Value Contains (*=)

    What it does:

    Selects elements whose attribute value contains a specific substring.

Attribute Contains Selector (*=)

The *= selector targets elements whose attribute value contains a specified substring. 

img[src*="logo"] {
  border: 2px solid black;
}

  • All logo images are styled

    Real-life comparison:
    Searching names that contain “dev”.

    Attribute Value Contains Whole Word (~=)

    What it does:

    Selects elements whose attribute value contains a whole word, separated by spaces.

Attribute Whole Word Selector (~=)

The ~= selector targets elements whose attribute value contains a specific whole word separated by spaces. 

div[class~="card"] {
  padding: 20px;
}

  • Matches class="box card big"

    Real-life comparison:
    Finding an exact word in a sentence.

    Attribute Value Starts With + Hyphen (|=)

    What it does:

    Selects values that are exact match or start with value.

Attribute Hyphen Selector (|=)

The |= selector matches elements whose attribute value is exactly the specified value or starts with it followed by a hyphen. 

p[lang|="en"] {
  color: blue;
}

  • Matches en, en-US, en-IN

    Real-life comparison:
    Language codes like en, en-GB, en-IN.

    Attribute Selectors in Forms (Common Use)

    Styling Inputs by Type

    input[type="text"] {

      border: 2px solid #333;

    }

    input[type="email"] {

      border: 2px solid green;

    }

    input[type="submit"] {

      background-color: blue;

      color: white;

    }

    No extra classes
    Clean and readable

    Styling Required & Disabled Fields

    input[required] {

      border-left: 4px solid red;

    }

    input[disabled] {

      background-color: #eee;

      cursor: not-allowed;

    }

    Clear form feedback

    Real-life comparison:
    Disabled elevator buttons.

Complete Attribute Selector Practical Example

This example demonstrates how attribute selectors style different input fields based on their type and required attributes. 

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selector Form Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        form {
            width: 300px;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            padding: 10px;
            margin-bottom: 10px;
            width: 100%;
            box-sizing: border-box;
        }

        input[required] {
            border-left: 4px solid red;
        }

        input[type="submit"] {
            background-color: #1a73e8;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #1558b0;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Name" required>
        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">
        <input type="submit" value="Register">
    </form>
</body>
</html>

  • Common Mistakes

    Forgetting quotes around values
    Overusing attribute selectors everywhere
    Confusing ^=, $=, *=
    Using attribute selectors when a simple class is better

    Best Practices for Attribute Selectors

    Use mainly for forms and inputs
    Keep selectors readable
    Avoid very complex combinations
    Combine with pseudo-classes (:focus, :hover)
    Use when attributes already exist

    Attributes = element identity
    Attribute selectors = smart targeting
    Forms benefit the most
    Cleaner HTML + powerful CSS

    Attribute selectors style elements by attributes
    Extremely useful for forms and inputs
    Multiple selector types offer flexibility
    Reduce the need for extra classes
    Essential advanced CSS concept

❮ Previous