Select all a links without h tags

Question

I want to underline all links but not if the links are h1,h2 and so on. here is a simple css:

#heatmapthemead-the-content-container .entry-content a {
    text-decoration: underline;
}

This underlines all links including h1,h2,h3 when I use :not selector it doesn't work and also h1,h2 stay underlined

#heatmapthemead-the-content-container .entry-content a:not(h1,h2,h3) {
        text-decoration: none;
    }

I use also !important :

h1,h2,h3,h4,h5,h6 a {
text-decoration: none !important;
}

But h1,h2 links stay underlined. Does anybody have a trick?

Answer 1

There's no need to make it !important . Look at the example below.

 a{ text-decoration: underline; } h1 a, h2 a, h3 a{ text-decoration: none; } 

 <div> <h1><a href="#">Sample</a></h1> <p><a href="#">Sample</a></p> <h2><a href="#">Sample</a></h2> <div><a href="#">Sample</a></div> <h3><a href="#">Sample</a></h3> </div> 

You're writing the code in wrong way, write it like

h1 a, h2 a, h3 a{
    text-decoration: none;
}

and so on.

And writing like this will make the code more readable, and easier to find your mistake.

h1 a,
h2 a,
h3 a{
    text-decoration: none;
}

It not gonna make any difference in the output though.

Answer 2

Your last example has the right idea and should work if you did it like this:

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none !important;
}

Answer 3

You don't have to use :not . All you have to do is select the tags but add a next to it, so that it selects the h1s that are a link. By doing the following it should work.

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none !important;
}

To see more click here