Question

Hello I’m having some issues with CSS on my blog. My WordPress theme has a post styles section in the CSS file which have a class “Entry” in which “a” attribute is defined for the links inside the article area.
I generated a button from css generator and inserted the button in an article that is pointing to some other website using href. My CSS file has something like this,

.Entry a{color:black;text-decoration:underline};

.button {background:black;color:white And some other Styling};

I used this code to display the button.

<a href="some link" class="button">Go to this link</a>

Without the use of class=”button”, the link follow the Entry a property. But when I use class with it, it display the button with the mixture of Entry a and class button styles. I don’t want the button to use Entry a properties. Any help?

Answer 1

You could rewrite the first rule using the CSS3 :not pseudo-class selector as

.Entry a:not(.button) {color:black;text-decoration:underline}

This will do what you need, but it’s not supported by IE versions earlier than 9.

A true cross-browser solution is more involved: you would need to “undo” the attributes that .Entry a applies in your .button rule. For example:

.Entry a {color:black;text-decoration:underline}

.button {color:white;text-decoration:none;background:black}

Update: I forgot something quite important.

If you do go the “undo” route you will need to make sure that the “undoing” selector has specificity at least equal to that of the first selector. I recommend reading the linked page (it’s not long) to get to grips with the concept; in this specific case to achieve this you have to write a.button instead of simply .button.