CSS and Regular Expressions

They way you do this is simpler than you think, if you’ve ever used regular expressions you are already a master at this, and if you haven’t used regular expressions you will be able to master this type of selection anyways without a problem and learn some regex on the way.

PDF files usually end with ".pdf", unless it’s been dynamically generated. With the CSS trick am about to show you could add a pdf icon to every pdf link in your site.

The attribute am looking for in this case is href and its value ends with ".pdf"

 /* apply icon */

In regular expressions "$" marks the end of a string, so in CSS we used it to say that we just want to style all the links that end with ".pdf"

Another regular expression character used very often is the "^" sign, it’s used to mark the beginning of string. Let’s use this sign to style links whose protocol is "https".


Now what if you wanted to style all PHP links? You are probably thinking of using the "$" I showed you since this marks the end of a string and you can use it for extensions, but remember that PHP links might contain parameters, so they might not end with the extension. We need to use the asterisk "*", the asterisk is used to check for a particular string anywhere in the string and not just at the beginning or end.

/* styles here */

You can apply regex to other types of tags not just anchor tags. If you want to learn about regular expressions in CSS and more type of selectors check out this link ,Selectors Level 3, and my previous post on CSS attributes and values.