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?](http://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class) — takendarkk, Apr 10 '17 at 10:45

score 3 · Answer 1 · answered Apr 10 '17 at 10:47

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 '17 at 10:47

Smokinggunz

Yes, that was it. I modified it slightly to: '.social-icons a::after { content: '' !important; }' and that did the trick. Thank you, @Smokinggunz ! – Marjan Crabtree - the ICT girl Apr 10 '17 at 11:05
1

If this worked please accept my answer. @MarjanCrabtree-theICTgirl – Smokinggunz Apr 10 '17 at 11:18

score 1 · Answer 2 · answered Apr 10 '17 at 10:46

1

You can use the :not() selector:

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

answered Apr 10 '17 at 10:46

Lars Beck

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 Apr 10 '17 at 10:47
@CBroe Oops, I must haved missed that part, nevermind... :/ – Lars Beck Apr 10 '17 at 10:48

2 Answers2