Attribute Selector - Attribute Selector in CSS

What is an attribute selector?

Attribute selector is the way to select elements you want to style (style) in HTML documents based on the attributes of one or more HTML tags.

Attribute selector can select objects without having to declare additional Classes or IDs into HTML tags and still be able to navigate to those components, making the code more neat and coherent.

Some Attribute selector stand out

This article TipsMake.com would like to introduce some outstanding Attribute selector sets that are most commonly used:

• [attribute]
• [attribute = "value"]
• [attribute ~ = "value"]
• [attribute | = "value"]
• [attribute ^ = "value"]
• [attribute $ = "value"]
• [attribute * = "value"]

[Attribute] selector

[Attribute] selector helps select all elements with the specified [attribute] attribute.

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

As an example,, select all elements with the [target] attribute and style the element.

Links with target properties will have a yellow background:

 tipsmake.com 
 tipsmake.com 
 gamevui.vn 
 

Note: To [attribute] can work in IE8 and earlier, it is necessary to declare the element at the beginning of the document.

[Attribute = "value"] selector

The [attribute = "value"] selection helps select all elements with the [attribute] attribute and the value specified.

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

As an example,, select all elements with the target = "_ blank" attribute :

Links with target = "_ blank" attribute will have a yellow background:

 tipsmake.com 
 tipsmake.com 
 gamevui.vn 
 

Note: For [attribute = "value"] to work in IE8 and earlier, it is necessary to declare the element at the beginning of the document.

[Attribute ~ = "value" selector]

[Attribute ~ = "value"] selector helps select all elements with the [attribute] attribute containing the specified value value .

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

As an example,, select all elements whose title attribute contains the word "flower":

All images with the title attribute contain the word "flower", then the border is added purple.

Note : The selector will only select elements whose title attribute contains values such as title = "flower", title = "summer flower" or title = "flower new" , without selecting the elements of the title = "my -flower " or title =" flowers ".

Picker [attribute | = "value"]

The selector [attribute | = "value"] helps select all elements with the [attribute] attribute starting with the value specified.

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

As an example,, select all elements with class attributes starting with the word "top":

Website Administration Network

Technology - Programming

CSS and CSS3

Note : The selector will select only elements with class attributes starting with a single word, or a single word and a word in the top- form , such as top-header, top-text, not selecting those element with other words like topcontent.

Selection [attribute ^ = "value"]

The [attribute ^ = "value"] selector helps select all elements with the [attribute] attribute starting with the specified value value , different from [attribute | = "value"] above where it has no exception and selects all elements that begin with value, including words in the form adjacent to another word.

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

As an example,, select all elements with class attributes starting with the word "top":

Website Administration Network

Technology - Programming

CSS and CSS3

Note: For [attribute ^ = "value"] to work in versions from IE8 and earlier, it is necessary to declare the element at the beginning of the document.

Picker [attribute $ = "value"]

[Attribute $ = "value"] selector helps select all elements with the [attribute] attribute ending with the specified value value .

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

Note : Value is not necessarily a word!

As an example,, select all elements with class properties ending with the word "test":

Stay up to date with the latest trends, discoveries, and research science and technology

[Attribute * = "value" selector]

[Attribute * = "value"] selector helps select all elements with the [attribute] attribute contained by the specified value value .

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

Note : Value is not necessarily a word!

As an example,, select all elements with class attributes that contain the word "te":

Next lesson: Form - Form in CSS