I've a nested list of divs, after the third level it doesn't seem to update the style.

This is the css:

```css
.list_unordered .list_item {
     background:none transparent no-repeat 3px 7px !important;
}
.list_unordered[data-attr-listtype="bullet"] .list_item {
     background-image:url("../Images/list_bullet.png") !important;
}
.list_unordered[data-attr-listtype="square"] .list_item {
    background-image:url("../Images/list_square.png") !important;
}
.list_unordered[data-attr-listtype="dash"] .list_item {
    background-image:url("../Images/list_dash.png") !important;
}

```

And this is the HTML:

```
<div class="list_unordered" data-attr-listtype="bullet">
  <div class="list_item">
    <span class="text">Rondje 1</span>
    <div class="list_unordered" data-attr-listtype="square">
      <div class="list_item">
        <span class="text">Blokje 2</span>
        <div class="list_unordered" data-attr-listtype="dash">
          <div class="list_item">
            <span class="text">Streepje 3</span>
            <div class="list_unordered" data-attr-listtype="square">
              <div class="list_item">
                <span class="text">Blokje 4</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list_item">
    <span class="text">Rondje 1</span>
  </div>
</div>

```

This is the result:  

![Result](https://i.stack.imgur.com/kAZMN.png)  

As you can see the fourth item should be a square but it gets rendered as a dash.
What is the reason of this? And how can I fix this?