---
title: CSS Attr Selectors
description: "> ## Style HTML Elements With Specific Attributes > > > > It is possible to style HTML elements that have specific attributes or attribute values. ## CSS \\[attribute\\] Selector The `[attribute]` selector is used to select elements with a specified attribute.…"
url: "https://apprentice.mn/docs/css-attr-selectors/"
updated: "2021-05-10"
category: CSS
---

# CSS Attr Selectors

> ## Style HTML Elements With Specific Attributes
>
>
>
> It is possible to style HTML elements that have specific attributes or attribute values.

## CSS \[attribute\] Selector

The `[attribute]` selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

       `a[target] {
  background-color: yellow;
}`

## CSS \[attribute=”value”\] Selector

The `[attribute="value"]` selector is used to select elements with a specified attribute and value.

The following example selects all <a> elements with a target=”_blank” attribute:

     `[title~="flower"] {
  border: 5px solid yellow;
}`

## CSS \[attribute~=”value”\] Selector

The `[attribute~="value"]` selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is “flower”:

     `[title~="flower"] {
  border: 5px solid yellow;
}`

The example above will match elements with title=”flower”, title=”summer flower”, and title=”flower new”, but not title=”my-flower” or title=”flowers”.

## CSS \[attribute|=”value”\] Selector

The `[attribute|="value"]` selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with “top”:

**Note:** The value has to be a whole word, either alone, like class=”top”, or followed by a hyphen( – ), like class=”top-text”

     `[class|="top"] {
  background: yellow;
}`

## CSS \[attribute^=”value”\] Selector

The `[attribute^="value"]` selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with “top”:

**Note:** The value does not have to be a whole word! 

     `[class^="top"] {
  background: yellow;
}`

## CSS \[attribute$=”value”\] Selector

The `[attribute$="value"]` selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with “test”:

**Note:** The value does not have to be a whole word!  

     `[class$="test"] {
  background: yellow;
}`

## CSS \[attribute\*=”value”\] Selector

The `[attribute*="value"]` selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains “te”:

**Note:** The value does not have to be a whole word!  

     `[class*="te"] {
  background: yellow;
}`

## Styling Forms

The attribute selectors can be useful for styling forms without class or ID:

     `input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}`

## All CSS Attribute Selectors

| Selector | Example | Example description |
| --- | --- | --- |
| [\[*attribute*\]](https://www.w3schools.com/cssref/sel_attribute.asp) | \[target\] | Selects all elements with a target attribute |
| [\[*attribute*=*value*\]](https://www.w3schools.com/cssref/sel_attribute_value.asp) | \[target=_blank\] | Selects all elements with target=”_blank” |
| [\[*attribute*~=*value*\]](https://www.w3schools.com/cssref/sel_attribute_value_contains.asp) | \[title~=flower\] | Selects all elements with a title attribute containing the word “flower” |
| [\[*attribute*\|=*value*\]](https://www.w3schools.com/cssref/sel_attribute_value_lang.asp) | \[lang\|=en\] | Selects all elements with a lang attribute value starting with “en” |
| [\[*attribute*^=*value*\]](https://www.w3schools.com/cssref/sel_attr_begin.asp) | a\[href^=”https”\] | Selects every <a> element whose href attribute value begins with “https” |
| [\[*attribute*$=*value*\]](https://www.w3schools.com/cssref/sel_attr_end.asp) | a\[href$=”.pdf”\] | Selects every <a> element whose href attribute value ends with “.pdf” |
| [\[*attribute*\*=*value*\]](https://www.w3schools.com/cssref/sel_attr_contain.asp) | a\[href\*=”w3schools”\] | Selects every <a> element whose href attribute value contains the substring  |

         [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-attr-selectors%2F&linkname=CSS%20Attr%20Selectors](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-attr-selectors%2F&linkname=CSS%20Attr%20Selectors)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-attr-selectors%2F&linkname=CSS%20Attr%20Selectors](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-attr-selectors%2F&linkname=CSS%20Attr%20Selectors)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-attr-selectors%2F&linkname=CSS%20Attr%20Selectors](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-attr-selectors%2F&linkname=CSS%20Attr%20Selectors)[https://www.addtoany.com/share](https://www.addtoany.com/share)