Menu
CSS

Attribute Selector

The attribute selector in CSS is used to select elements based on the presence or value of their attributes. This type of selector provides a powerful way to style elements without needing to add specific classes or IDs to them.

 

Basic Syntax

The basic syntax for an attribute selector is:

[element[attribute]]

You can also specify attribute values in various ways:

  • [attribute]: Selects elements with the specified attribute.
  • [attribute="value"]: Selects elements with the specified attribute and exact value.
  • [attribute~="value"]: Selects elements with the specified attribute whose value is a space-separated list of words, one of which is exactly "value".
  • [attribute|="value"]: Selects elements with the specified attribute whose value is either exactly "value" or starts with "value" followed by a hyphen.
  • [attribute^="value"]: Selects elements with the specified attribute whose value starts with "value".
  • [attribute$="value"]: Selects elements with the specified attribute whose value ends with "value".
  • [attribute*="value"]: Selects elements with the specified attribute whose value contains "value".

 

Examples

Selecting Elements with a Specific Attribute

/* Selects all elements with the "data-example" attribute */
[data-example] {
  color: blue;
}

 

Selecting Elements with an Exact Attribute Value

/* Selects all elements with the type attribute set to "text" */
input[type="text"] {
  border: 1px solid #ccc;
}

 

Selecting Elements with a Space-separated List of Words

/* Selects elements with the title attribute containing the word "flower" */
[title~="flower"] {
  background-color: yellow;
}

 

Selecting Elements with Attribute Values Starting with a Specified Value

/* Selects all elements with a class attribute that starts with "btn-" */
[class^="btn-"] {
  font-weight: bold;
}

 

Selecting Elements with Attribute Values Ending with a Specified Value

/* Selects all elements with an href attribute that ends with ".pdf" */
a[href$=".pdf"] {
  color: red;
}

 

Selecting Elements with Attribute Values Containing a Specified Value

/* Selects all elements with a title attribute that contains the word "card" */
[title*="card"] {
  border: 2px solid green;
}

 

Example in HTML and CSS

Here is a complete example demonstrating the use of attribute selectors in a simple HTML document:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribute Selector Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="text" placeholder="Text input">
  <input type="password" placeholder="Password input">
  <a href="document.pdf" title="Download PDF">Download PDF</a>
  <a href="page.html" title="Go to Page">Go to Page</a>
  <p data-example="example1">This paragraph has a data-example attribute.</p>
  <p title="flower power">This paragraph has a title attribute with the word 'flower'.</p>
</body>
</html>

 

CSS (styles.css)

/* Selects all elements with the "data-example" attribute */
[data-example] {
  color: blue;
}

/* Selects all input elements with type attribute set to "text" */
input[type="text"] {
  border: 1px solid #ccc;
}

/* Selects all anchor elements with an href attribute ending in ".pdf" */
a[href$=".pdf"] {
  color: red;
}

/* Selects all elements with a title attribute containing the word "flower" */
[title*="flower"] {
  background-color: yellow;
}

In this example:

  • Elements with the data-example attribute will have blue text.
  • Input elements with the type attribute set to "text" will have a border.
  • Anchor elements with an href attribute ending in ".pdf" will have red text.
  • Elements with a title attribute containing the word "flower" will have a yellow background.
CSS