CODEWITHSUNDEEP
css
John Carter
John Carter

Reputation: 33

CSS Classes on Single Element

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?

Upvotes: 3

Views: 250

Answers (6)

Fabian
Fabian

Reputation: 3495

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 }

Upvotes: 1

Mitya
Mitya

Reputation: 34556

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 */ }

Upvotes: 1

Mattias Buelens
Mattias Buelens

Reputation: 20159

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.

Upvotes: 2

Jon
Jon

Reputation: 437336

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.

Upvotes: 5

Rajesh J Advani
Rajesh J Advani

Reputation: 5710

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.

Upvotes: 0

Nuxy
Nuxy

Reputation: 384

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};

Upvotes: 2

Related Questions