Css property selector-select and modify an element based on the name attribute value of an html Element

In CSS page design, sometimes we need to select this element based on the attribute value of the html element. At this time, we can use the attribute selector css attribute selector Syntax:

[Attribute = value] For example: [target =-blank]/* select all elements using target = "-blank" */or [attribute ~ = Value] For example: [title ~ = Flower]/* select all the elements of the title attribute containing the word "flower" */or [attribute | = language], for example: [lang | = en]/* select all elements of a lang attribute starting value = "EN */

Example 1 of css attribute selector:

Select All a Elements Using target = "_ blank"

The link with target="_blank" gets a yellow background:
manongjc.comdisney.comwikipedia.org
Note: For [attribute] to work in IE8 and earlier, a DOCTYPE must be declared.

Online operation

Example 2 of css attribute selector:

Select all elements whose title attribute contains the word "flower"

The image with the title attribute containing the word "flower" gets a yellow border.
Note: For [attribute~=value] to work in IE8 and earlier, a DOCTYPE must be declared.

Online operation

Example 2 of css attribute selector:

Select all elements of the starting value of a lang attribute = "en"

Hello!
Hi!
Ello!
Hi!
Hei!
Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.

Online operation

Related reading:

Css Selector