How to use CSS attribute value regular matching selector (tips)

There are three types of attribute value regular matching selectors:

• [attr^="val"]
• [attr$="val"]
• [attr*="val"]

These three attribute selectors match characters, not words. The angle symbol ^ , dollar sign $ , and asterisk * are special identifiers in regular expressions, representing preceding match, following match, and any match, respectively.

Using these selectors, pure CSS can create very cool functions.
<!-- more -->

Displays a small icon for the hyperlink and a graphic of the file type

The [attr^="val"] front-matching selector can be used to determine the link address type of the <a> element to display the corresponding small icon. The styles of small icons showing hyperlinks are as follows:

[href] {padding-left: 18px;}
/* Link address*/
[href^="https"],
[href^="//"] {
    background: url("./images/link.png") no-repeat left;
}
/* Anchor link in web page */
[href^="#"]
    background: url("./images/anchor.png") no-repeat left;
}
/* Mobile phone and email */
[href^="tel:"]
    background: url("./images/tel.png") no-repeat left;
}
[href^="mailto:"]
    background: url("./images/e-mail.png") no-repeat left;
}

Effect

By using [attr$="val"] and then matching the selector, you can display the small icon of the file type. The CSS is as follows:

/* Point to the PDF file */
[href$=".pdf"]
    background: url("./images/pdf.png") no-repeat left;
}
/* Download the zip file */
[href$=".zip"] {
    background: url("./images/zip.png") no-repeat left;
}
/* Image link*/
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"]
    background: url("./images/image.png") no-repeat left;
}

The effect is as follows

CSS attribute selector search filtering technology

We can use attribute selectors to help us achieve search filtering effects, such as address books and city lists. This has high performance and requires less code.

The HTML structure is as follows:

<input type="search" id="input" placeholder="Enter the city name or pinyin" />
<ul>
    <li data-search="Chongqing Citychongqing">Chongqing City</li>
    <li data-search="Harbin Cityhaerbin">Harbin City</li>
    <li data-search="Changchun Citychangchun">Changchun City</li>
    <li data-search="Changsha Citychangsha">Changsha City</li>
    <li data-search="沪shanghai">Shanghai</li>
    <li data-search="Hangzhou Cityhangzhou">Hangzhou City</li>
</ul>

At this point, when we enter content in the input box, we can achieve the search and matching effect by dynamically creating a CSS code based on the input content, without having to write code for matching verification ourselves.

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// Text input box input.addEventListener('input', function() {
    var value = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="' + value +'"]) { display: none; } ' : '';
});

This concludes this article on how to cleverly use CSS attribute value regular matching selectors (tips). For more relevant CSS attribute value regular matching content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!