CSS [attribute|=”value”] Selector

CSS [attribute|="value"] selector selects all the elements having their attribute value exactly same as the specified value or the attribute value starting from the specified value followed by a hyphen(-).

The [attribute|=”value”] selector in the example below selects all the <p> elements having a class attribute equals to 'internal' or the class attribute starting from the word 'internal' followed by a hyphen(-) and sets their background color to yellow.

Example:

p[class|="internal"]{
   background: yellow;
   padding: 5px;
}

Select all <img> elements where the alt attribute starts with word “nature” and set their border radius to 50%.

Example:

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

CSS Syntax

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

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

Related Pages

CSS Tutorials: CSS Attribute Selectors

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts