Struggling with CSS hierarchy

HTML & CSS
1

I am having a few issues understanding how CSS hierarchy works…

Style sheet:


class1 div {
 width: 100px;
}
class2 {
 width: 150px;
}

HTML:


<div class="class1">
 <div>This div is 100px in width</div>
 <div class="class2">This div should be 150px in width but is actually only 100px</div>
</div>

The problem is that the style of class1 is overwriting the style of class2… Note: I cannot edit any of class1 but can alter class2.

Thanks

G

2

No, neither class is working, because they need a dot before them:


[COLOR="Red"].[/COLOR]class1 div {
 width: 100px;
}
[COLOR="Red"].[/COLOR]class2 {
 width: 150px;
}
3

Sorry… messed up when writing the post… the classes do have dots in front of them but the question still stands.

4

O, I didn’t realize those divs were nested.

This is an issue of specificity. Both divs have a class applied, BUT the first rule

.class1 div

has a greater weight than

.class2

because of the word “div”. If instead you had

.class1 div {
 width: 100px;
}
[COLOR="Red"]div.[/COLOR]class2 {
 width: 150px;
}

then the second div would be 150px wide.

Have a look at this article on speciificity.

5

Thanks, this is what I was looking for