How to Target File Extensions in CSS
Ferenc Almasi • 2020 December 01 •
1 min read
You can target file extensions in CSS by using a regex selector:
[href$=".pdf"]:before {
content: "📜";
}This example above uses an attribute selector that selects each href attribute, that ends with ".pdf", meaning this will select all anchors where the link is pointing to a PDF file. You can also use the following selectors to select different parts of the attribute:
// Selects an href with a specific value
[href="https://webtips.dev"]:before {
content: "👨💻";
}
// Selects an href which begins with "https"
[href^="https"]:before {
content: "↖️";
}
// Selects an href which contains the word "download"
[href*="download"]:before {
content: "📥";
}
// Selects an href which contains the word "insensitive", case-insensitively
[href*="insensitive" i]:before { ... }
// Selects an href which contains the word "SeNsItIve", case-sensitively
[href*="SeNsItIve" s]:before { ... }
// Selects an href which begins with "https" and ends with ".dev"
[href^="https"][href$=".dev"]:before {
content: "👨💻";
}This lets you target either the beginning, part of, the whole, or end of the string. Note that you can also use i or s to match a string case-insensitively or case-sensitively. If you combine them you can also filter out specific urls which begins and ends with certain values.
Resources:
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
Courses
CSS - The Complete Guide (including Flexbox, Grid and Sass)
The HTML & CSS Bootcamp
2024 February 20 •