CSS Attribute Selector

Last Updated on February 14, 2021 by Roshan Parihar

In this tutorial, learn how to use CSS attribute selector to select elements and apply CSS. The same elements can have different attributes and the CSS attribute selector makes it easier to select them.

What is CSS Attribute Selector

A CSS attribute selector is a way of styling an HTML element using the attribute. You don’t need to access an HTML element using its id or class. Use a specific attribute or attribute with a specified value to select an HTML element and give a CSS style to it.

CSS Attribute Selector is the easiest way of styling an HTML element by using the attribute and its value inside the square bracket. Learn below-given types of attribute selectors to style an HTML element.

How to Style an HTML element using CSS Attribute Selector

To style an HTML element, you can use different types of CSS attribute selectors. There are many different types of CSS attribute selector given below, you can use to apply CSS to an HTML element. See each type of example and learn how to use them to give styling.

CSS [attribute] Selector

Select and HTML element using the specified attribute. Suppose you want to select an HTML containing the attribute role, you can use this type of CSS attribute selector.

Output

  • One
  • Two
  • Three
  • Fore

The above example applies the CSS to only the list element which contains the attribute role.

CSS [attribute=”value”] Selector

Select an HTML element using the specified attribute with its value. If you want to select an HTML element with a specified attribute and value, you can use this type of CSS attribute selector.

Output

  • One
  • Two
  • Three
  • Fore

The above given example applies the CSS to only the list element that contains the attribute role="three" value.

CSS [attribute~=”value”] Selector

If you want to apply the CSS to all the HTML elements containing exactly the matching word or space-separated word in the class.

Output

  • One
  • Two
  • Three
  • Fore

The above-given example contain the list element with the matched class name as lithree a single or comma-separated.

CSS [attribute|=”value”] Selector

If you want to apply the CSS to the attribute containing the hyphen-separated value beginning with the specified attribute value.

Output

  • One
  • Two
  • Three
  • Fore

The above-given example applies the CSS to the list elements start with the class “one” as a hyphen-separated value.

CSS [attribute^=”value”] Selector

If you want to apply the CSS to the HTML element containing the attribute value start with the specified value.

Output

  • One
  • Two
  • Three
  • Fore

The above-given example applies the CSS to the list elements start with the class “one” as a starting value of the class attribute.

CSS [attribute$=”value”] Selector

If you want to apply the CSS to the HTML element containing the attribute value start with the specified value.

Output

  • One
  • Two
  • Three
  • Fore

The above-given example applies the CSS to the list elements start with the class “one” as a starting value of the class attribute.

CSS [attribute*=”value”] Selector

If you want to apply the CSS to the HTML element containing the attribute value start with the specified value.

Output

  • One
  • Two
  • Three
  • Fore
  • Five
  • Six

The above-given example applies the CSS to the list elements start with the class “one” as a starting value of the class attribute.

Styling Form Input Types Using CSS Attribute Selectors

You can easily apply CSS to all the input types like text, email, submit. You just need to use the CSS attribute selector and the CSS you want to apply to these input types. See the example given below to learn how to apply CSS using attribute selector.

Output

Username :

Email :


The above example applies CSS to input types text, email, and submit.

You May Also Like to Read

I hope you like this post on how to use CSS attribute selectors.

Reference
Attribute Selectors Cascaded stylesheet
CSS Attributes