CSS Specificty Issue - Grid inside Grid

Question

Is there a way to adapt the Specificity of classes to allow the use of a grid system as seen in this example?

.col3 .width1 {
    background:blue;
}
.col4 .width1 {
    background:red;
}

<div class="col4">
    <div class="width1">
        <div class="col3">
            <div class="width1">
                <p>Test</p>
            </div>
        </div>
    </div>
<div>

Seen in this FIDDLE

The inner most is red, not blue.

The issue comes from putting a grid inside a grid using the same class calls.

I understand that writing the CSS with the order I want the grids to take precedent will help, but I can not guarantee that the col3 and col4 will not change positions.

Answer 1

Went a different route and through Sass just dynamically created all the classes I need in a style of:

grid(size)-block(size)

So it defines how large the grid is, then with the block, how much this div should take up of that grid size.

Size being defined by #x# [ x by y, row by column]

So would have the example of: .grid1x4-block1x2

The grid is then setup as 1 row with 4 possible spots, and this div takes up a block of 1 row by 2 columns.