I recently encountered a new request on a client website that introduced me to an extremely cool CSS trick. We were working on an e-commerce website that featured hundreds of different products but all were from six specific, well known brands. We observed that it would be very useful to the site’s visitors to be able to easily distinguish between the products offered by the six brands as they browsed the site’s catalog and navigated through pages and pages of choices.
I brainstormed a little and came up with the idea of theming the “Read more” button that people would be clicking on to view a product according to the brand’s colors. After a little research, I found that this was possible by using CSS attribute selectors.
I first discovered a great intro to this CSS trick on (what else) CSS Tricks which is one of my favorite websites. This got me started and I managed to make my vision a reality with just a few of my own additions.
To really make this as simple as possible, I think I’ll begin by breaking down some CSS basics.
This diagram will help us break down the various components that we can use when applying our CSS. We’ll work with this basic HTML and give examples for styling based on each part.
A. Styling by the HTML element
a {
color: blue;
}
B. Styling by the “href” attribute
a[href="http://google.com"] {
background-color: red;
}
…or something like this would work too:
a[href*="google"] {
background-color: red;
}
This example states that any links with “google” in the “href” attribute will have a red background. The asterisk indicates that if “google” is found anywhere in the URL, this rule will apply.
You could also style for certain file types. Here is how to use the “href” attribute selector to style links to a PDF file:
a[href$=".pdf"] {
font-family: "Arial" sans-serif;
}
C. Styling by ID
#apple {
font-weight: bold;
}
Any elements with the “apple” ID will have bold text.
D. Styling with classes
.orange {
outline: orange;
}
…or something like this:
.orange.cherry {
text-decoration: underline;
}
The first example sets an orange outline on anything with the “orange” class. The second states that elements with BOTH the “orange” and “cherry” classes will have an underline.
E. Styling by the “title” attribute
a[title~=Google] {
border: 1px dashed green;
}
This rule applies a dashed, green border to links that have “Google” in the title attribute.
F. Styling by the “target” attribute
a[target="_blank"] {
border-radius: 4px;
}
This example sets a border radius on links that open in a new window.
As you can see, there are loads of cool ways that we can apply our custom styling to HTML elements.
For a good example of what we did with the attribute selectors, check out the Power Barn. I hope you find this useful. Please feel free to share your own examples of what you’ve done with CSS attribute selectors.
Get more leads for your realbigmarketing.com website by using AI on Instagram. If you’re looking to drive more traffic, generate leads, and grow your brand’s reach, you can get more information and start a free trial here: https://ln.run/r7sbV
This is an AI-powered Instagram growth service that:
-Increases followers with targeted, high-quality audiences.
-Boosts engagement through smart AI algorithms.
-Targets users based on hashtags and accounts they follow.
-Saves you time by automating tedious Instagram tasks.
Our service focuses on real, organic growth—no bots, no fake followers. It’s perfect for brands like yours that want to turn Instagram into a lead generation powerhouse. Better yet, our service is provided on a month-by-month subscription basis so you can cancel any time you like. No contracts and a 7 day free trial.
Imagine if realbigmarketing.com could tap into TikTok for authentic leads? Our AI-driven growth service targets the right users—based on hashtags they’re into and profiles they’re following—to boost your reach and send traffic back to you. We’ve had similar websites see 100+ leads in 30 days.
Ready to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://shorten.tv/1mNMn
Get more leads for your realbigmarketing.com website by using AI on Instagram. If you’re looking to drive more traffic, generate leads, and grow your brand’s reach, you can get more information and start a free trial here: https://shorten.is/B5ihQ
This is an AI-powered Instagram growth service that:
-Increases followers with targeted, high-quality audiences.
-Boosts engagement through smart AI algorithms.
-Targets users based on hashtags and accounts they follow.
-Saves you time by automating tedious Instagram tasks.
Our service focuses on real, organic growth—no bots, no fake followers. It’s perfect for brands like yours that want to turn Instagram into a lead generation powerhouse. Better yet, our service is provided on a month-by-month subscription basis so you can cancel any time you like. No contracts and a 7 day free trial.
What if realbigmarketing.com could tap into TikTok for authentic leads? Our smart AI growth service pinpoints the perfect users—based on hashtags they use and accounts they follow—to skyrocket your reach and send traffic back to you. We’ve had businesses like realbigmarketing.com see 100+ leads in 30 days.
Want to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://cutt.ly/Nrtv4L3f
What if realbigmarketing.com could harness TikTok for authentic leads? Our AI-powered growth service pinpoints the right users—based on hashtags they use and accounts they follow—to skyrocket your reach and send traffic back to you. We’ve had similar websites see over 100 leads monthly.
Want to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://www.youtube.com/shorts/sfVup2NhPQ4
Ever thought how realbigmarketing.com could harness TikTok for genuine leads? Our smart AI growth service pinpoints the ideal users—based on hashtags they’re into and profiles they’re following—to skyrocket your reach and send traffic back to you. We’ve had websites like yours see 100+ new leads in a month.
Ready to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://www.youtube.com/shorts/sfVup2NhPQ4
Imagine if realbigmarketing.com could tap into TikTok for real leads? Our smart AI growth service targets the perfect users—based on hashtags they’re into and profiles they’re following—to skyrocket your reach and send traffic back to you. We’ve had websites like yours see 100+ new leads in a month.
Ready to make TikTok work for realbigmarketing.com? Test it out free for a week here: https://www.youtube.com/shorts/sfVup2NhPQ4
Ever thought how realbigmarketing.com could leverage TikTok for real leads? Our AI-powered growth service zeros in on the perfect users—based on hashtags they use and profiles they’re following—to supercharge your reach and push traffic back to you. We’ve had websites like yours see 100+ new leads in a month.
Want to make TikTok work for realbigmarketing.com? Try our service free for 7 days here: https://www.youtube.com/shorts/U3-a9dgY6vk
Imagine if realbigmarketing.com could leverage TikTok for authentic leads? Our smart AI growth service targets the right users—based on hashtags they’re into and profiles they’re following—to skyrocket your reach and send traffic back to you. We’ve had similar websites see over 100 leads monthly.
Ready to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://www.youtube.com/shorts/U3-a9dgY6vk
Imagine if realbigmarketing.com could leverage TikTok for real leads? Our smart AI growth service zeros in on the ideal users—based on hashtags they’re into and people they watch—to supercharge your reach and drive traffic back to you. We’ve had websites like yours see 100+ new leads in a month.
Ready to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://www.youtube.com/shorts/U3-a9dgY6vk
Ever thought how realbigmarketing.com could harness TikTok for authentic leads? Our AI-driven growth service targets the ideal users—based on hashtags they use and people they watch—to skyrocket your reach and drive traffic back to you. We’ve had businesses like realbigmarketing.com see over 100 leads monthly.
Want to make TikTok work for realbigmarketing.com? Get started with a 7-day free trial here: https://www.youtube.com/shorts/U3-a9dgY6vk