I have the following html structure:

```
<ul>
    <li>
        <a href="#"> Superlevel 1 </a>
        <span class="actions">Somes actions</span>
        <ul>
            <li>
                <a href="#">Level 1 </a>
                <span class="actions">Other actions</span>
                <ul>
                    <li>
                        <a href="#">Sub-Level1</a>
                        <span class="actions">Sub Level actions</span>
                    </li>
                    <li>
                        <a href="#">Sub-Level1</a>
                        <span class="actions">Sub Level actions</span>
                    </li>
                </ul>
            </li>
        </ul>
    <li>
</ul>

```

The css is this:

```
.treeview li .actions {
    float: left;
    padding: 0 15px;
    visibility: hidden;
}

.treeview li:hover > .actions {
    visibility: visible;
}

```

The problem is that when I pass the mouse over the last li (sub-level 1) the .actions of its parents Level1 and Superlevel1 are displayed. I would like only sub-level1 .actions to be displayed.

So I have tried to replace last css block by:

```
.treeview li:hover:last-of-type > .actions {
    visibility: visible;
}

```

but the `last-of-type` pseudo-selector is applied to li not to `li:hover`. 

Any idea of how to combine these two pseudo-selectors ?