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:

1. [attribute]
2. [attribute = "value"]
3. [attribute ~ = "value"]
4. [attribute | = "value"]
5. [attribute ^ = "value"]
6. [attribute $ = "value"]
7. [attribute * = "value"]

[Attribute] selector

[Attribute] selector is used to select all elements with the specified [attribute] attribute.

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

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

Links with target properties will have a yellow background:

 quantrimang.com 
 meta.vn 
 gamevui.vn 
 

Attribute Selector - Attribute Selector in CSS Picture 1

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 is used to select all elements with the [attribute] attribute and the value specified.

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

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

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

 quantrimang.com 
 meta.vn 
 gamevui.vn 
 

Attribute Selector - Attribute Selector in CSS Picture 2

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 is used to select all elements with the [attribute] attribute containing the specified value value .

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

For 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.

Attribute Selector - Attribute Selector in CSS Picture 3

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"] is used to select all elements with the [attribute] attribute starting with the value specified.

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

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

Website Administration Network

Technology - Programming

CSS and CSS3

Attribute Selector - Attribute Selector in CSS Picture 4

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 is used to 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; 
 } 

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

Website Administration Network

Technology - Programming

CSS and CSS3

Attribute Selector - Attribute Selector in CSS Picture 5

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 is used to select all elements with the [attribute] attribute ending with the specified value value .

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

Note : Value is not necessarily a word!

For 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 Selector - Attribute Selector in CSS Picture 6

[Attribute * = "value" selector]

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

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

Note : Value is not necessarily a word!

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

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

Attribute Selector - Attribute Selector in CSS Picture 7

Previous article: Image Sprite in CSS

Next lesson: Form - Form in CSS