CODEWITHSUNDEEP
css
user2469520
user2469520

Reputation:

Confused about overriding CSS styles

I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.

First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...

.CoolL .Caption, .CoolR .Caption { color: #900; }

Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:

.Black { background: #000; color: #fff; }

Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...

<div class="CoolR Plus Max300">
  <div class="Shadow2">
    <img src="">
    <div class="Caption Black">Text</div>
  </div>
</div>

In fact, the background is displaying black, but the text color is still brown.

I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...

.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }

What am I missing? Thanks.

Upvotes: 3

Views: 117

Answers (5)

OldGeeksGuide
OldGeeksGuide

Reputation: 2928

I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black. You'll probably be able to override this with !important, but a better style might be to reduce the complexity of your rules:

.Cool .caption { color: #900; }

.Cool .caption.black { color: background: #000; color: #fff; }

And put .L and .R in separate classes

.Cool.L { . . . } /* For things specific to CoolL, but not CoolR */

.Cool.R { . . . } /* and vice-versa */

Upvotes: 0

albert
albert

Reputation: 8153

you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet: 

  
.CoolR1 .Black, .Black{ background: #000; color: #fff;}

/** you could also chain your classes for specificity power **/  
.Black.Caption{color:#fff}

that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors

Upvotes: 0

tanishalfelven
tanishalfelven

Reputation: 1186

There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important. With that, your code would look like this:

.Black { 
    background: #000; 
    color: #fff; 
}

Also, not sure if you asked this, but you can apply CSS to all components by using the *, like so:

* {
    //blahblahblah
}

Upvotes: 0

Mohamad
Mohamad

Reputation: 35359

I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.

.caption {
  color: #000;
}

.cool-caption {
  color: #900;
}

.caption-with-background {
  background-color: #000;
  color: #fff;
}

Upvotes: 1

Matt Eno
Matt Eno

Reputation: 696

You could try :

.Black { background: #000 !important; color: #fff !important; }

Upvotes: 0

Related Questions