Menu
I have some links for stories, some of which are in pdf, and some of these are special editions. The special editions are prefixed by special-edition in their href.
Here is a simplified html portion of my app
<div class='container-node'>
<a href='1.pdf'>Story 1</a>
<a href='2.pdf'>Story 2</a>
<a href='3.pdf'>Story 3</a>
<a href='special-edition1.pdf'>Special Edition 1</a>
<a href='4.pdf'>Story 4</a>
<a href='special-edition2.pdf'>Special Edition 2</a>
</div>
What I need is to add a background color for the links ending with the extension pdf, but only if they are not special editions. I am able to apply the following css to handle pdf, but the problem that this also applies to the special edition link. What can I do here?
a[href$=".pdf"]{
background-color: #ADD8E6 ;
}
.container-node{
background-color: #32CD32;
}
242
asked Jun 06 '26 08:06
You can simply use a combination of your attribute selector with another not attribute selector as below.
a[href$=".pdf"]:not([href*="special-edition"]){
background-color: #ADD8E6 ;
}
<!DOCTYPE html>
<html>
<head>
<style>
a[href$=".pdf"]:not([href*="special-edition"]){
background-color: #ADD8E6 ;
}
.container-node{
background-color: #32CD32;
}
</style>
</head>
<body>
<div class='container-node'>
<a href='1.pdf'>Story 1</a>
<a href='2.pdf'>Story 2</a>
<a href='3.pdf'>Story 3</a>
<a href='special-edition1.pdf'>Special Edition 1</a>
<a href='4.pdf'>Story 4</a>
<a href='special-edition2.pdf'>Special Edition 2</a>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
