CODEWITHSUNDEEP
css
KP.
KP.

Reputation: 186

Correct Usage of :not() selector

I want to apply certain styling to some, but not all, links within a certain div. The structure is as follows:

<div class="feed-post">
    <a href="#">This is the link I want to style</a>
    <a class="internal-link" href="#">This is the link I DON'T want to style</a>
</div>

I don't have direct access to the HTML so I cannot simply add a class to the first link. I've tried a few combinations of selectors already, such as:

.feed-post a:not(.internal-link)

I really don't understand why the above selector doesn't work. Any help would be greatly appreciated.

EDIT: Solved! Thanks all for the help. It was being targeted by a different selector. When I made that one more specific, my unintended styling went away.

Upvotes: 1

Views: 30

Answers (1)

Vandesh
Vandesh

Reputation: 6904

You're using it correctly, it works as intended, unless the style is overriden somewhere else in your CSS.

Check the below snippet.

.feed-post a:not(.internal-link){
background: red;
}
<div class="feed-post">
    <a href="#">This is the link I want to style</a>
    <a class="internal-link" href="#">This is the link I DON'T want to style</a>
</div>

Upvotes: 1

Related Questions