CSS Attribute

CSS attribute selectors target HTML elements based on their attributes or attribute values.

An attribute provides extra information about an element. For example:

<input type="email">
<a href="https://example.com">Visit Website</a>
<img src="course.jpg" alt="CSS Course">

Here, type, href, src, and alt are attributes. Attribute selectors are useful when you want to style elements without adding extra classes or IDs.

Select Elements with an Attribute

Use [attribute] to select elements containing a particular attribute, regardless of its value.

[title] {
  border-bottom: 1px dotted black;
}

This selector targets every element containing a title attribute:

<p title="Helpful information">Move your pointer here.</p>
<p>This paragraph is not selected.</p>

Only the first paragraph receives the border because it has the title attribute.

Select an Exact Attribute Value

Use [attribute="value"] when the attribute value must match exactly.

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

Example HTML:

<input type="email">
<input type="text">

This rule styles only the email input. The text input is not selected.

Important points:

• The complete value must match.
• The attribute name and value are written inside square brackets.
• Quotation marks around the value are recommended.

Select a Value from a Space-Separated List

The [attribute~="value"] selector matches a complete word inside a space-separated list.

[class~="featured"] {
  background-color: lightyellow;
}

<div class="course featured">CSS Course</div>
<div class="course-featured">HTML Course</div>

The first <div> is selected because featured is a separate word. The second is not selected because it is only part of a larger word.

Select a Value or Hyphenated Value

The [attribute|="value"] selector matches:

• The exact value.
• A value beginning with the given word followed by a hyphen.

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

This selector matches both examples:

<p lang="en">English content</p>
<p lang="en-GB">British English content</p>

It is commonly useful with language codes.

Select a Value That Starts with Specific Text

The [attribute^="value"] selector matches values that begin with specific characters.

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

<a href="https://example.com">Secure website</a>
<a href="/courses">Courses</a>

Only the first link is selected because its href begins with https.

This selector is useful for identifying:

• Secure external links
• Telephone links beginning with tel:
• Email links beginning with mailto:

Select a Value That Ends with Specific Text

The [attribute$="value"] selector matches values that end with particular characters.

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

<a href="css-guide.pdf">Download PDF</a>
<a href="css-course.html">View Course</a>

Only the PDF link becomes red because its href ends with .pdf.

You can use this selector to identify file types such as:

• .pdf
• .jpg
• .docx
• .zip

Select a Value Containing Specific Text

The [attribute*="value"] selector matches an attribute value containing specific characters anywhere within it.

a[href*="youtube"] {
  font-weight: bold;
}

<a href="https://youtube.com/devbrainbox">YouTube Channel</a>
<a href="https://devbrainbox.com">Website</a>

Only the first link becomes bold because its href contains youtube. Be careful with this selector because it matches partial text, not necessarily a complete word.

Combining Attribute Selectors

You can combine multiple attribute selectors to create a more precise rule.

input[type="text"][required] {
  border-color: red;
}

This selector targets an input only when:

• Its type is text.
• It contains the required attribute.

<input type="text" required>
<input type="text">
<input type="email" required>

Only the first input matches both conditions.

Attribute selectors can also be combined with classes, elements, or pseudo-classes:

.form-field[type="email"]:focus {
  border-color: green;
}

Attribute Selector Summary

• [attr] — has the attribute
• [attr="value"] — exactly matches the value
• [attr~="value"] — contains a complete word
• [attr|="value"] — exact or begins with a hyphenated value
• [attr^="value"] — begins with the value
• [attr$="value"] — ends with the value
• [attr*="value"] — contains the value anywhere