Exclude CSS class from inheriting

Question

I have tried to search but am not sure if I am posing the question right.

I applied the following css to my site:

a[target='_blank']::after {
    content: '\29C9';
}

This means that all external links will get the icon attached to it. So far, so good, it works as expected.

There are some situations though where I do not want this to happen, like in social share buttons. How can I exclude some classes?

Like when the link appears in a div with class 'socialbutton'?

PS I cannot add other style to these buttons (WordPress website and generated code)

Possible duplicate of Can I write a CSS selector selecting elements NOT having a certain class? — takendarkk
– takendarkk, Commented Apr 10, 2017 at 10:45

Smokinggunz · Accepted Answer · 2017-04-10 10:47:08Z

3

You can overwrite this css code by adding new css to the class.

Example you can overcome this:

a[target='_blank']::after {
    content: '\29C9';
}

By doing this:

.socialbutton::after {
    content: '\fff' !important;
}

answered Apr 10, 2017 at 10:47

Smokinggunz

3883 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yes, that was it. I modified it slightly to: '.social-icons a::after { content: '' !important; }' and that did the trick. Thank you, @Smokinggunz !

If this worked please accept my answer. @MarjanCrabtree-theICTgirl

Lars Beck · Accepted Answer · 2017-04-10 10:46:23Z

1

You can use the :not() selector:

a[target='_blank']:not(.social)::after {
    content: '\29C9';
}

answered Apr 10, 2017 at 10:46

Lars Beck

3,5942 gold badges26 silver badges26 bronze badges

That works only if the links themselves have that class, but the question was about them being in a parent element with that class.

@CBroe Oops, I must haved missed that part, nevermind... :/