Attribute value regular match selectors include the following three types:

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

These three property selectors are character matches, not word matches. The sharp corner symbol ^, dollar sign $, and asterisk * are special identifiers in regular expressions, indicating pre-match, post-match, and any match respectively.

With these selectors, you can do pretty cool things with pure CSS.

Small ICONS and file type diagrams that display hyperlinks

Use the match selector before [attr^=”val”] to determine the link address type of the element to display the corresponding small icon. The thumbnail that shows the hyperlink looks like this:

[href] {padding-left: 18px; }/* Link address */
[href^="https"].[href^="//"] {
    background: url("./images/link.png") no-repeat left;
}
/* Webanchor */
[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;
}
Copy the code

The effect

The [attr$=”val”] match selector is used to display small ICONS of file types. CSS is as follows:

/* Point to a 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;
}
Copy the code

Results the following

CSS property selector search and filtering technology

We can use the attribute selector to assist us to achieve search filtering effects, such as address book, city list, so that high performance, less code.

The HTML structure is as follows:

<input type="search" id="input" placeholder="Enter city name or pinyin" />
<ul>
    <li data-search="Chongqing">chongqing</li>
    <li data-search="Harbin Haerbin">Harbin.</li>
    <li data-search="Changchun Changchun">Changchun city</li>
    <li data-search="Changsha city">Changsha city</li>
    <li data-search="Shanghai Shanghai">Shanghai</li>
    <li data-search="Hangzhou">hangzhou</li>
</ul>
Copy the code

At this point, when we input content in the input box, as long as according to the input content to dynamically create a section of CSS code can achieve the search matching effect, no need to write their own code for matching verification.

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

The end result is as follows

If you have inspiration and help, you can click a concern, collection, also can leave a message to discuss, this is the biggest encouragement to the author. About the author: Web front-end engineer, full stack development engineer, continuous learner.

Now pay attention to “front-end foreign language selection” wechat public number, but also send a network of high-quality video courses network disk information ah, can save you a lot of money!