CSS styling precedence

Question

I have two CSS classes:

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}

.smaller-image {
width: 100px;
border-radius:30px;
}

Usage in HTML document:

<img class="thick-green-border smaller-image" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

When the image element is assigned both the classes, the rule for the style border-radius described in the class .smaller-image is taking effect, not the radius set inside thick-green-border class. That is the border-radius of the image is becoming 30px, not 10px.

Can anyone please tell me why? I have tried changing the order in which the classes are assigned to the image but the result is the same.

Jamie Barker · Answer 1 · 2016-08-09T08:24:52.160

Change the order of the classes in the CSS.

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 10px;
}
.smaller-image {
  width: 100px;
  border-radius: 30px;
}
.smaller-image2 {
  width: 100px;
  border-radius: 30px;
}
.thick-green-border2 {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 10px;
}

<img class="thick-green-border smaller-image" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

<img class="thick-green-border2 smaller-image2" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

They both have the same hierarchy level, so the latter one will be applied.

Alright! Both the classes being on the same level was the issue then! Thanks @Jamie-barker — Yeasir Arafat Majumder, Aug 09 '16 at 08:59

score -1 · Answer 2 · answered Aug 09 '16 at 08:07

-1

Is this what you want?

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
display: inline-block;
}

.smaller-image {
width: 100px;
border-radius:30px;
}

<div class="thick-green-border">
<img class="smaller-image" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
  </div>

answered Aug 09 '16 at 08:07

gabrielchl

606
9
20

OP wants to override the border radius set by `.thick-green-border`, not to have both borders. – cHao Aug 09 '16 at 08:09
fine, I misunderstood what he ment – gabrielchl Aug 09 '16 at 08:10
I want the border set by "thick-green-border" class. @cHao got this right. – Yeasir Arafat Majumder Aug 09 '16 at 08:18
so why don't you just remove the border style in .smaller-image? – gabrielchl Aug 09 '16 at 08:23
I understand your point. And I could very well do that. But I just wanted to know why the border style in the 2nd class was in effect and not the first one. I totally forgot they were on the same level @GabrielChiHongLee – Yeasir Arafat Majumder Aug 09 '16 at 16:44

CSS styling precedence

2 Answers2