Query: CSS Overwriting reg

Question

consider following mark-up:

<div>
  Hey Senorita
</div>

<div class="alkaline">
  Hey Alkaline
</div>

<div>
  Hey Amour!
</div>

coupled with following CSS:

* {
  color:pink;
}
div.alkaline {
  color:grey;
}
div {
  color:orange;
}

after saving the file I would expect text inside all of the <div> to be orange but it turns out like this:-

Someone please explain why isn't the css overwriting not happening in this case?

this is because you defined in the stylesheet that all divs must have color - orange but the the div containing class alkaline has color grey — Shivam, Jul 21 '21 at 05:59
if you want the text to be orange then you need to remove this div.alkaline { color:grey; } or the second option is you can give div with color orange an !important like this div { color: orange !important } — Shivam, Jul 21 '21 at 06:02
May I ask you that why you added class alkaline to one div only if you want to keep everything common. please explain a little bit more about the scenario. — Shivam, Jul 21 '21 at 06:05
@shivam I had this doubt for a long ago. I thought, in this case, css must overwrite ```color``` property of all ```div``` and set it to ```orange```. I was taught that css runs "top-to-bottom" style and properties are prone to be overwritten. — Prakash B, Jul 21 '21 at 06:12
same element with 2 different properties, it will prioritize the last one in your case color - orange — Shivam, Jul 21 '21 at 06:16

score 0 · Answer 1 · answered Jul 21 '21 at 06:11

0

Your CSS is prioritizing .alkaline class instead of div for that. If you want everything can you change the color from grey to orange or you can remove that . alkaline styling part from your css part.

answered Jul 21 '21 at 06:11

Saurav Purohit

1

score 0 · Answer 2 · answered Jul 21 '21 at 06:12

0

The reason the middle div is gray is because of CSS specificity rules. The div.alkaline is more specific than just the div.

See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

for more info on how the weight is calculated.

answered Jul 21 '21 at 06:12

A Haworth

30,908
4
11
14

Query: CSS Overwriting reg

2 Answers2