CSS3 new Property selector: [Attribute*=value], [Attribute^=value], and [Attribute$=value]

In CSS3, [Attribute*=value], [Attribute^=value], and [Attribute$=value] Three selectors have been added, so that the property selector has a wildcard concept.

Below is a complete sample code that uses these three properties, and the results of the post-run page display:

<! DOCTYPE html>

The effect of running in the browser shows:
The CSS3 property selector is illustrated below with this example.
1. [Attribute*=value] Property Selector
The [attribute *= value] Property selector means: Select an HTML element in the attribute property that contains the value string.
In the example above [ID *= Irs],attribute is the IRS, which is to select an element with an "IRS" string in the id attribute, that is, the first DIV element, and set the background color of the element to red.
2. [Attribute^=value] Property Selector
The [attribute ^= value] Property selector means: Select an HTML element in the attribute property that begins with the value string.
In the example above [ID ^= Sec],attribute is Id,value is the SEC, which is to select an element in the id attribute that begins with the "SEC" string, the second div element, and sets the background color of the element to blue.
3. [Attribute$=value] Property Selector
The [attribute $= value] Property selector means: Select an HTML element in the attribute property that ends with the value string.
In the example above [ID $= Ird],attribute is the IRD, this is to select the element in the id attribute that ends with the "IRD" string, which is the third DIV element, and sets the background color of the element to green.



CSS3 new Property selector: [Attribute*=value], [Attribute^=value], and [Attribute$=value]