CSS Classes on Single Element

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?

Jon · Accepted Answer · 2012-08-07 10:24:37Z

5

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.

edited Aug 7, 2012 at 10:24

answered Aug 7, 2012 at 10:17

Jon

439k85 gold badges756 silver badges820 bronze badges

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

4 Comments

Nuxy Over a year ago

I've liked that, didn't know about this selector, I guess it's CSS3?

Jon Over a year ago

@Nuxy: Yes, CSS3. Added a link to the W3C wiki.

Mattias Buelens Over a year ago

Although your :not() approach sounds reasonable at this stage, sooner or later you'll need to define new styles which get overridden by .Entry a. Eventually, you'll end up in a maintenance nightmare with ridiculously long :not() clauses. The real problem is the specificity of the selectors, and that's what you need to target in order to solve it.

Jon Over a year ago

@MattiasBuelens: I see your point, but IMHO it is entirely possible that there will be no such problem in the future since we 're talking about a non-professional making a few tweaks to a WP theme. If CSS3 support is not a problem I consider :not a very good practical solution here.

Nuxy · Accepted Answer · 2012-08-07 10:16:50Z

2

For avoid .Entry a CSS styles to be applied at when you use the selector .button you should overwritte with the selector .button all the properties defined in .Entry a

For example:

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

.button {color:white;text-decoration:none;background:black;color:white And some other Styling};

answered Aug 7, 2012 at 10:16

Nuxy

3841 gold badge2 silver badges17 bronze badges

Comments

Mattias Buelens · Accepted Answer · 2012-08-07 10:29:17Z

This happens because .Entry a has a higher specificity than .button. The result is that your element receives its actual background property from .button but its color and text-decoration properties come from .Entry a.

There are a few ways to "fix" this:

Increase the specificity of the .button selector.
For example, if you only use .button on a tags, you could change the selector to a.button. This new selector would have the same specificity as .Entry a (one tag value and one class value), so the "winner" is decided by the source order. If a.button comes after .Entry a in the CSS file, a.button takes the upperhand.
Decrease the specificity of the .Entry a selector.
Do you really need to target only a tags inside .Entry elements? Can you get away with simply making it a base style for all a tags? If you can, you can simply change .Entry a to a. This new selector has only one tag value, which is less specific than the one class value in .button.
Define extra selectors on .button.
For example, you could use .button, a.button so that the second selector takes over where the first selector fails. Be warned that this could get very messy when you encounter this same problem with other tags such as input or button tags.
~~Use !important.~~
Never do this, as you'll get yourself in trouble if you ever try to make a .big-button class which needs to override some .button styles.

If you want to learn more about specificity, here's a good article about what it is and how it's calculated.

Mitya · Accepted Answer · 2012-08-07 10:37:23Z

1

Well in CSS3 you could do this:

.Entry a:not(.button)

That will restrict your .Entry a rule from affecting any elements with .button.

If CSS3 is not an option (i.e. you need to support IE <= 8) you'll need to overwrite whichever inadvertent styles are being inherited. So for example if your button is ending up with an unwanted border from .Entry a, overwrite this in your .button rule, e.g.

.button { border: none; /* more button styles */ }

edited Aug 7, 2012 at 10:37

answered Aug 7, 2012 at 10:18

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

2 Comments

Mattias Buelens Over a year ago

This won't actually work, as .Entry a is still more specific than .button. I made a fiddle, see for yourself.

Mitya Over a year ago

Well done on the Fiddle. The specificity would need changing, agreed. The first option is the best one - I was merely mentioning the need to overwrite styles if CSS3 is not an option.

Fabian · Accepted Answer · 2012-08-07 10:44:58Z

1

You could overwrite any styles in .button class that are defined in .Entry a

E.g. if you dont want your text to be underlined you could use text-decoration: none

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

a.button {
    background: black;
    color: white;
    text-decoration: none;
    /*And some other Styling*/
}

Also don't use semicolons after braces }; in your css. simply use a brace to close }

edited Aug 7, 2012 at 10:44

answered Aug 7, 2012 at 10:19

Fabian

3,4954 gold badges37 silver badges43 bronze badges

3 Comments

John Carter Over a year ago

Thanks for your answer :) Yeah I used semicolon after braces by mistake.

Mattias Buelens Over a year ago

This won't actually work, as .Entry a is still more specific than .button. I made a fiddle, see for yourself.

Fabian Over a year ago

Edited: Right, you will have to use a.button. Sorry for that, i missed to add the a :). jsfiddle.net/dYVva

Rajesh J Advani · Accepted Answer · 2012-08-07 10:18:53Z

0

The simplest thing would be to "undo" the specific styles that your element inherits from the styles for .Entry a. For example, to undo the text-decoration style, you could use text-decoration:none.

If you only need it to work for newer browsers, then you could use the not() selector @Jon has mentioned.

answered Aug 7, 2012 at 10:18

Rajesh J Advani

5,7102 gold badges25 silver badges35 bronze badges

Collectives™ on Stack Overflow

CSS Classes on Single Element

6 Answers 6

4 Comments

Comments

Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related