CODEWITHSUNDEEP
css
user1765862
user1765862

Reputation: 14155

understanding css important keyword in this example

in my html I have

<div id="mainNewsBody" class="news">
    <a class="readMore" href="/News/Details/1">read more ...</a>
</div>

I tried to style read more ... snipper with this css

#mainNewsBody .news .readMore a{
    color: #7F0609;
}

to actually apply this style I have to use !important keyword in color property. I know that this !important keyword force to use that property but I do not understand why that is the case here, because I explicitly told to match on particular id with particular class element and inside that element to mach link.

Can someone englight me.

Thanks

Upvotes: 1

Views: 116

Answers (6)

DanielV
DanielV

Reputation: 96

Ozan is right, remove the "mainNewsBody" ID from the CSS if it's not absolutely necessary.

.news .readMore a{
color: #7F0609;}

If you want to be really specific and need to include the ID in the CSS selector remove the space from in-front of ".news"

#mainNewsBody.news .readMore a{
color: #7F0609;}

CSS Tricks - Multiple Class ID Selectors

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157344

It'd the specificity which is troubling you, the more elements class id you have in your selector, more specific your selector is.

So for example

.class a {

}

is more specific than just

a {

}

Just see to it that you do not have a more specific selector, if you've than you need to make the current one more specific or use !important declaration as you stated.

In the above snippet this is incorrect

#mainNewsBody .news .readMore a

It will search for an element having class news inside an element having an id mainNewsBody which is not true in your case so either use this

#mainNewsBody a.readMore { 
/* This will be more specific than the below one 
   as you are using id here and not class */
    color: #7F0609;
}

Or use

.news a.readMore {
    color: #7F0609;
}

Upvotes: 1

Arbel
Arbel

Reputation: 30999

Probably your code is generating inline css for the a element, or you have another less specific definition for a element with !important keyword somewhere else.

Inline styles have priority higher than styles defined outside the element. To overcome the inline style or a style with !important keyword by a less specific definition, you need to define it by the keyword !important and a more specific definition.

Upvotes: 0

Menno
Menno

Reputation: 12621

It's a.readMore instead of .readMore a (the first case would search for an element with class .readMore and append the CSS to any children a-elements)

and #mainNewsBody .news should be #mainNewsBody.news (you should 'concatenate' the id and class since they refer to the same element)

making a total of #mainNewsBody.news a.readMore

Fiddle

EDIT

I see many notes on simplifying your css to just classes. This really depends on what you're trying to accomplish. If you're working with a huge CSS file, I'd recommend specifying as strict as possible. This to prevent any CSS being applied on places where you don't want it to.

a { } for example will mess with all your links, a.news { } will only mess with a class='news'

Upvotes: 2

sylwia
sylwia

Reputation: 381

Try this one:

.news .readMore {
    color: #7F0609;
}

There's no need to call for id and class name for the same element.

Upvotes: 3

Ozan Deniz
Ozan Deniz

Reputation: 1087

CSS rules marked !important take precedence over later rules. !important ensures that this rule has precedence.

Upvotes: 0

Related Questions