Как взять отдельно первый элемент из только одного блока

Есть такая разметка

<div class="wn-list-blocks">
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
    <div class="wn-list-blocks-content">
        <div class="wn-list-blocks-icon"></div>
        <div class="wn-bottom-title"></div>
    </div>
</div>

Как мне выбрать первый элемент с классом .wn-list-blocks-icon и, допустим, изменить фоновую картинку только для него одного, т.е. взять первый элемент с этим классом со всей страницы. А то, я пытаюсь взять его так .wn-list-blocks-icon:nth-child(1) и насколько я понял он берет так первый элемент из блока, но так как этот элемент первый во всех блоках на странице, то я изменяю картинку для всех, и получается следующее: