Attribute Selectors: Target by HTML Attributes and Values

Master CSS Attribute Selectors. Learn how to style elements based on their HTML attributes using exact, substring, prefix, and suffix matches.

Introduction

If you build a registration form in HTML, you might have multiple <input> tags. Some inputs collect text (type="text"), some collect passwords (type="password"), and others act as submit buttons (type="submit").

If you style them using the element selector input { ... }, the submit button and the password field will receive identical dimensions, which looks terrible. You could add class tags to each input, but a cleaner way is using Attribute Selectors. Attribute selectors target elements based on the presence or value of their HTML attributes, allowing for precise styling without polluting your HTML with classes.

What You Will Learn

  • The syntax and notation of Attribute Selectors ([...]).
  • How to target elements based on the presence of an attribute.
  • Exact value matching vs. Substring matching (Prefix, Suffix, Contains).
  • Practical use cases for styling forms and external link icons.

Prerequisites

Detailed Explanation: Attribute Matchers

Attribute selectors use square brackets ([...]) containing the attribute name and optionally a matching operator and value.

The Match Types

| Selector Syntax | Matching Rule | Match Behavior | | :--- | :--- | :--- | | [title] | Presence | Targets any element containing the title attribute, regardless of its value. | | [type="submit"]| Exact | Targets elements where the attribute value is exactly "submit". | | [href^="https"]| Prefix (^=) | Targets elements where the attribute value starts with "https". | | [href$=".pdf"] | Suffix ($=) | Targets elements where the attribute value ends with ".pdf". | | [class*="icon-"]| Contains (*=) | Targets elements where the attribute value contains the substring "icon-". |

Visual Learning Diagram (Mermaid)

graph TD
    A[Input Elements] --> B{Attribute Selector check}
    B -->|type='text'| C[Apply: text field styles]
    B -->|type='submit'| D[Apply: action button styles]
    B -->|type='checkbox'| E[Apply: toggle box styles]
    
    style C fill:#10B981,stroke:#fff,color:#fff
    style D fill:#3B82F6,stroke:#fff,color:#fff

Code Examples

Example 1: Form Inputs Custom Styling

Let's style text fields and submit buttons differently without using classes:

<!-- index.html -->
<form>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <input type="submit" value="Login">
</form>

/* style.css */

/* Target text and password fields */
input[type="text"], 
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Target submit button */
input[type="submit"] {
  background-color: #3b82f6;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Example 2: External Link Icons

Identify external links vs. internal links and append style indicators:

/* Highlight links to secure external domains */
a[href^="https://"] {
  color: #10b981;
}

/* Append an indicator style for download links */
a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 11px;
  color: #ef4444;
}

Summary

Attribute selectors target elements using bracket notations ([...]) based on HTML attribute keys and values. By leveraging exact (=), prefix (^=), suffix ($=), and substring (*=) operators, developers can dynamically format forms and document links directly.

Related Articles

Next Tutorial

How do we target elements based on their state (like hovering or input errors) or position? Let's check: Pseudo-Classes.

← Back to Syllabus