CSS [attribute^=”value”] Selector

CSS [attribute^="value"] selector selects all the elements where the attribute value starts with a given value. The attribute value needs not be a whole word, like the [attribute|=”value”] selector.

The [attribute^=”value”] selector in the example below selects all the <p> elements where the class attribute starts with the value ‘int’ and sets their background color to yellow. Try it out:

Example:

p[class^="int"]{
   background: yellow;
}

Select all the links where the href attribute starts with a # character and set their background color to yellow.

Example:

a[href="#"]{
   background: yellow;
}

CSS Syntax

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

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

Related Pages

CSS Tutorials: CSS Attribute Selectors