CSS [attribute=”value”] Selector

CSS [attribute="value"] selector selects all the elements that have a given attribute with a given value. For example, it can select all the <a> elements that have a target="_blank" attribute or select all <img> elements that have an alt="round" attribute.

In the example below, the [attribute=”value”] selector selects all the <a> elements having target="_blank" attribute and sets their background color to yellow. Try it out:

Example:

a[target="_blank"]{
   background: yellow;
}

In the example below, the [attribute=”value”] selector selects all the <img> elements that have alt="round" attribute and set their border radius to 50%.

Example:

img[alt="round"]{
  border-radius: 50%;
}

Select all the <p> elements having class="center" and set their text alignment to center.

Example:

p[class="center"]{
  text-align: center;
}

CSS Syntax

The [attribute=”value”] selector has the following syntax:

element[attribute="value"]{
    CSS styles
}

Related Pages

CSS Tutorials: CSS Attribute Selectors