CODEWITHSUNDEEP
htmlcss
toni rmc
toni rmc

Reputation: 878

CSS class override property behaviour

I tried to find answer to this but nothing straight forward, not on the StackOverflow or any of the tutorials.

So lets say I have external CSS file and class is defined there:

.someclass
{
    color: blue;
    margin: 10px
    text-align: center;
    font-size: 20px;
}

And I have pages where I want to override one or more properties of this class but keep everything else the same.
Pages include this external CSS file.
After that inside <head> tag I put this definition that overrides one property:

<style>
    .someclass
    {
        color: green;
    }
</style>

When everything is parsed what will be the final content of the .someclass?
This:

.someclass
{
    color: green;
}

or this:

.someclass
{
    color: green;
    margin: 10px
    text-align: center;
    font-size: 20px;
}

Upvotes: 4

Views: 1036

Answers (3)

gilly3
gilly3

Reputation: 91497

When you have two style rules with identical selectors, the rule appearing later in the document wins. So, if your <link> tag is before your <style> tag, the property from the rule in the <style> tag will be applied.

Demo:

p {
  font-weight: bold;
  color: green;
}
p {
  font-family: sans-serif;
  color: blue;
}
<p>I am blue, not green.  I am also both bold and sans-serif!</p>

In fact, the selectors needn't be identical for this to apply. If they have the same specificity, the rule defined later wins. For example, if an element has two classes defined:

.a {
  width: 100px;
  padding: 8px;
  color: white;
  background-color: red;
}
.b {
  height: 75px;
  font-family: sans-serif;
  background-color: green;
}
<div class="a b">I am green!</div>

Or, for an element with multiple ancestor elements and rules that use the descendant combinator ():

html span {
  font-style: italic;
  color: orange;
}
body span {
  text-decoration: underline;
  font-family: sans-serif;
  color: navy;
}
  
<span>I'm navy!</span>

Or, for elements that have multiple pseudo-classes applied. I can see this one tripping someone up:

a:hover {
  text-decoration: overline;
  color: orange;
}
a:link, a:visited {
  font-family: sans-serif;
  color: green;
}
<a href="#orange">I'm a link that doesn't change color when hovered</a>

Upvotes: 0

Leo Javier
Leo Javier

Reputation: 1403

This is not necesary true Gilly3... it will depended on the rule specificity and it will also depend whether you are using the important flag or not... you definitely will inherit from the predecessor but you won't necessary overwrite it...

here an example see the results: http://jsfiddle.net/leojavier/xg4fffms/1/

<p class="text">Testing</p>
<p class="textb">Testing</p>
<p class="forceYellow textb">Testing</p>

CSS

body{
    background:#CCC;
}
body p.text {
    color:red;
}
.textb {
    color:purple;
}

p{
    color: blue;
}

.forceYellow {
    color:yellow !important;
}

Upvotes: 0

BoltClock
BoltClock

Reputation: 723598

It's the latter. Cascade resolution is on a per-property basis. If the color property exists somewhere with higher precedence (in this case, the internal stylesheet), then that property is cascaded to the more precedent one. The rest of the properties carry over because no more precedent declarations exist.

Interestingly, the CSS2.1 spec seems to conflate "style rules" and style declarations, in section 6.4. This may be a source of confusion. The subsection 6.4.1 clarifies this by referring only to property declarations.

Upvotes: 3

Related Questions