Overwrite older style rules without tampering original rules

HTML & CSS
1

So it’s my first question in a long time. I get confused between what rules get top-level. What I mean is, what has more priority over another? I know that inline styles are top level, but should rarely be used because I was told it was bad practice.

So my actual question and issue is, since I have 2 style sheets that refer to the same rule. Which one would be the one to dictate how the element looks? Say for instance, I have styles.css and other-styles.css. Both use the rule

.my-element {
	background-color: #000000;
	color: #FFFFFF;
}

styles.css gets called first and other-styles.css gets called after it. Next, I’d like to change .my-element to have a different style whenever other-styles.css is called. But then again, styles.css contains .my-element also. So in order for me to use .my-element on pages that use other-styles.css, I’d have to not include styles.css however, styles.css is the main style sheet so it would most likely break the page if it isn’t included.

In theory, I was trying to add some colors to a few icons with a background color. But the font color of the icon is dictated by an earlier style sheet. I want to also change the font color of the icon at the same time, retain the font color that doesn’t use other-styles.css. I tried using the same rule name with a different rule. But it doesn’t seem to change the color. I might want to try to add a new class to it and see if it changes color.

I just want to see if there’s an easier way of doing this. I’ve seen this done before in a lot of Bootstrap revamps. People would use the default Bootstrap style sheets, but then add in their styles which dictate the styles. And if you remove their style sheets, the style of the element reverts back to the default Bootstrap styles.

2

The first thing that will determine the style used is the order, the last rule declared will override previous ones. That is if the selectors have equal specificity.
So the next factor is specificity. A selector which “carries more weight” will override another targeting the same element, regardless of order.
Specificity can be a little strange to get your head around at first, but here’s a chart to explain it that may suit you. :wink:

900×900 139 KB

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

3 Likes
3

In this case, it should be fine, as other-styles will override the default style sheet, assuming the selectors are the same for both.

1 Like
4

Alright. The weird part is, the font color of the last declared selector still contains the color of the first selector. Could this be the weight you were talking about? I’ve declared a new color, but the font color stays white still even when I declared something like red.

5

The weight will depend on the selectors. Can you post the css for both sheets?
Eg

.my-element {
	background-color: #000000;
	color: #FFFFFF;
}

followed by

.my-element {
	color: #FF0000;
}

Should give red text, given the order.

6

I actually got it to work by adding a new selector to the last line in HTML like so

.new-lock {
	color: #FF0000;
}

<i class="ison fa fa-lock new-lock"></i>

The new-lock selector has the new rules so I guess that’s fine. I just don’t want to tamper with the original rules on my main style sheet because it would also ruin pages that might need those rules.

7

OK, but I’m curious why it was not working before. If like my previous example, it should override and be red.
But if it were:-

p .my-element {
	background-color: #000000;
	color: #FFFFFF;
}

followed by

.my-element {
	color: #FF0000;
}

It would not, because the first one has a higher specificity.

8

:sweat_smile: Silly me. I was using the wrong selector. It turns out, all I needed to use was .fa-lock since that was the selector that was supposed to be changed.

You learn something new everyday. Thanks @SamA74!

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.