CODEWITHSUNDEEP
cssinheritance
David
David

Reputation: 21

CSS inheritance issue

I have one stylesheet (layout.css) that imports the following CSS at the top of the style sheet:

@import "reset.css";
@import "typography.css";
@import "forms.css";
@import "fonts/fonts.css";
@import "tablecloth.css";

Everything seems to be in order apart from that blasted typography style sheet. What I mean by that is when I apply a style to, say, a paragraph, the only styles applied to it are taken from the tyopgraphy style sheet.

Example:

Applied in layout.css:

#three-col-container #right-col.filter p.more { color: #ff0000; font-size: 1.2em; }

What Inspector is telling me is applied (these styles are included in the typography style sheet):

p { font-size: 1em; color: #444; }

I've never came across this sort of inheritance issue. The other style sheets are working as expected.

Any suggestions welcome.

Thanks.

Upvotes: 2

Views: 173

Answers (3)

user641656
user641656

Reputation:

It might be a specificity issue??

I found this awhile ago that's helpful when trying to determine css inheritance rules:

  • Add 1 for each element (ex p and a) and pseudo-element (ex :before and :after);
  • add 10 for each attribute (ex [type=”text”]), class and pseudo-class (ex :link or :hover;
  • And add 100 for each ID;
  • and add 1000 for an inline style.

So #three-col-container #right-col.filter p.more has 2 ID's, 2 classes and 1 element, so it has a weight of 221.

Is it possible that there might be another rule that has a higher weight that's overriding your rule? Are there any other styles being applied other than those two? (Or even javascript applying inline rules?)

I try and use either Firebug or the Chrome/Safari Developer tools to try and figure out what rules are coming from where. Typically it'll give you the name of the css and the line the rule is on, the overridden rules will have a strikethrough. Once I figure out what rules are taking precedence I can raise or lower the weight of the rule to make it inherit properly.

Hopefully that helps!

Upvotes: 0

Alessandro Vendruscolo
Alessandro Vendruscolo

Reputation: 14875

#three-col-container #right-col.filter p.more means:

Apply this style to paragraphs (p) which have the more class that are descendants of something which has the id right-col and class filter that is descendant of something with id three-col-container.

Is this right?

Are you sure that in the typography stylesheet the style rules don't have the !important flag at the end? Are you that the URL of that stylesheet is correct?

Upvotes: 1

tjvr
tjvr

Reputation: 17981

You could try using the !important flag on the end of the rule you want to override, before the semicolon.

This will make sure it's always applied, and so should override the inherited rule.

Upvotes: 1

Related Questions