Struggling with CSS hierarchy

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

Style sheet:

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


<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>

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.



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;

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

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


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.

Thanks, this is what I was looking for