Attribute Selectors

Attribute selectors target elements based on their HTML attributes, not just classes or IDs.

Basic Attribute Selector

Select elements that have a specific attribute:

• [placeholder] - elements with a placeholder attribute
• [href] - elements with an href attribute
• [type] - elements with a type attribute

Exact Value Match

Select elements with a specific attribute value:

• [type="email"] - input with type exactly "email"
• [type="password"] - input with type exactly "password"

Styling Form Inputs

Links with Attributes

Try:

• [href] - all links with href
• [target="_blank"] - external links (new tab)

Data Attributes

Custom data attributes are perfect for attribute selectors:

Exercise: Style Required Inputs

Add a red border to required inputs: