Regular expression usage in CSS selectors

Yes, CSS has regular expressions too (Amen)

Two powerful tools for showing off in CSS: matrices and regular expressions.

In fact, we don’t need to be surprised. After all, CSS is also a language, and regular expressions are meant to be useful for things beyond a specific language.

Some general rules for regular expressions

Regardless of the language, the rules of regular expressions are universal; the difference may lie in the way they are written.

Regular expressions are a very deep topic, and if we really want to talk about it, we can write a thick book! It’s hard to remember. When I need to use it, I just search Baidu…

Among them, there are some key characters that have specific meanings and represent the rules of the regular expression world.

For example:

• The character ^ indicates that the beginning of the string matches;
• The character $ indicates that the end position of the string matches;
• The character * indicates that any position in the string matches;
• The character i indicates that the string matching is case insensitive;
• The character g indicates global matching of the string;

etc.

These rules are also universal in the CSS world.

Three CSS attribute selectors and regular expressions

The development of CSS attribute selectors is currently divided into three stages:

CSS2.1 attribute selector direct matching: [attr], [attr="val"], [attr~="val"], [attr|="bar"]

CSS3 attribute selector regular matching: [foo^=”bar”], [foo$=”bar”], [foo*=”bar”]

CSS4 attribute selector ignores case matching: [attr="val" i]

Among them, the last two stages belong to the regular matching stage. With the development of CSS, more complex regular matching should appear, and we can wait and see.

So what do these many attribute matching writing methods mean?

as follows:

[attr]

As long as the element has the attr attribute:

<div attr="val"></div>      
<div attr="text val"></div> 
<div attr="value"></div>    
<div attr="val-ue"></div>

[attr=”val”]
The element's attribute name is 'attr' and the value must be 'val':

<div attr="val"></div>      
<div attr="text val"></div> 
<div attr="value"></div>    
<div attr="val-ue"></div>

[attr~=”val”]

The 'attr' value must contain the word 'val'. Note that the wording here is "word" rather than character. CSS was invented by foreigners whose native language is English. English sentences are composed of a word + space + a word. therefore:

<div attr="val"></div>      
<div attr="text val"></div> 
<div attr="value"></div>    
<div attr="val-ue"></div>

At the time of CSS2.1, CSS did not take into account the languages ​​of other countries in such depth. Therefore, matching "words" like here only works for characters in the ASCII range. For Chinese, even if you put a space in the middle of a Chinese word and pretend it is a "word", it is useless. therefore:

[attr~="Me"]
<div attr="I'm so handsome"></div>

[attr|=”bar”]

The 'attr' attribute value must begin with the word bar, or begin with bar-. Again, it's "words", not "characters", so we have:

<div attr="bar"></div>       
<div attr="bar-val"></div>   
<div attr="barval"></div>    
<div attr="bar val"></div>

Likewise, Chinese is not supported. To support Chinese, please use CSS3 attribute selectors.

The above CSS2.1 attribute selectors are supported starting from IE7 browser. However, IE7 browser is not strictly supported.

[attr=^”val”]

The first three characters of the value need to be val, so:

<div attr="val"></div>      
<div attr="text val"></div> 
<div attr="value"></div>    
<div attr="val-ue"></div>

You can compare the above [attr|="bar"] to feel the difference between "word" and "character".

[attr$=”val”]

The last three characters of the attribute value need to be val, so:

<div attr="val"></div>      
<div attr="text val"></div> 
<div attr="value"></div>    
<div attr="val-ue"></div>

[attr*=”val”]

The attribute value can contain the three characters val anywhere, so:

<div attr="val"></div>      
<div attr="text val"></div> 
<div attr="value"></div>    
<div attr="val-ue"></div>

The above three attribute selectors belong to CSS3, but amazingly, IE7 browser also supports them. It's like IE8 browser supports CSS3's box-sizing. It feels like Xiao Ming, who usually gets 38 points on the test, suddenly gets 61 points. Is it unexpected or surprising?

The last heavyweight guest, the case-insensitive i:

[attr operator value i]

For example: [attr~=”val” i], [attr*=”val” I], etc. are all legal ways of writing. The "i" can also be capitalized.
Just like the function of i in regular expressions, it ignores upper and lower case characters. Since languages ​​like Chinese do not have the concept of upper and lower case characters, this feature only applies to characters in the ASCII range.

We can take a simple example to compare, the existing selector [attr*="val"], then we have:

<div attr="VAL"></div>      
<div attr="Text val"></div> 
<div attr="Value"></div>    
<div attr="Val-ue"></div>

However, if there is an extra i, code>[attr*=”val” i], then:

<div attr="VAL"></div>      
<div attr="Text val"></div> 
<div attr="Value"></div>    
<div attr="Val-ue"></div>

It can match any uppercase or lowercase letters.

compatibility

Currently, Chrome, FireFox, and Safari already support i regular expressions, but IE has returned to its original state after the surprise, and even IE14 still does not support case-insensitive:

It is estimated that this feature can be applied in actual projects soon.

Examples

Seeing is believing. I made a simple demo about the regular expression of selectors. You can click here: CSS selector regular expression demo

The following CSS:

li[data-index^='t'] {
    color: red;    
}
li[data-index^='f'] {
    color: blue;    
}
li[data-index^='f' i]:after {
    content: '✓Support i regular expression';
    color: green;
}

The result in FireFox browser:

It can be seen that if case sensitivity is not used, only one <li> can be captured, and there is an extra i, so both are queried.

This is the end of this article about the use of regular expressions in CSS selectors. For more relevant CSS selector regular expression content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!