Css Nth-Child Selector Not Selecting Expected Elements

Question

I am trying to select the 7th and 8th elements of each of the following sections to change display to none.

<div class="container-fluid">
    <div class="row">
        <h1>Title 1</h1>
        <a href="https://example.com/96" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 1</p>
            </div>
        </a>
        <a href="https://example.com/95" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 2</p>
            </div>
        </a>
        <a href="https://example.com/94" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 3</p>
            </div>
        </a>
        <a href="https://example.com/93" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 4</p>
            </div>
        </a>
        <a href="https://example.com/92" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 5</p>
            </div>
        </a>
        <a href="https://example.com/91" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 6</p>
            </div>
        </a>
        <a href="https://example.com/90" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 7</p>
            </div>
        </a>
        <a href="https://example.com/89" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 8</p>
            </div>
        </a>
    </div>
    <div class="row">   
        <h1>Title 2</h1>
        <a href="https://example.com/96" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 1</p>
            </div>
        </a>
        <a href="https://example.com/95" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 2</p>
            </div>
        </a>
        <a href="https://example.com/94" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 3</p>
            </div>
        </a>
        <a href="https://example.com/93" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 4</p>
            </div>
        </a>
        <a href="https://example.com/92" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 5</p>
            </div>
        </a>
        <a href="https://example.com/91" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 6</p>
            </div>
        </a>
        <a href="https://example.com/90" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 7</p>
            </div>
        </a>
        <a href="https://example.com/89" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 8</p>
            </div>
        </a>
    </div>
</div>

Obviously when doing...

.imageblock.col-sm-3:nth-child(7) { display: none; } 

...nothing happens since those elements are not the 7th child of the parent element.

But when I try...

a.recirc-rail_unit:nth-child(7) { display: none; } 

...nothing happens as well. I cannot figure out what I am doing incorrectly.

---

EDIT: using the a tag as a class was a typo. My appologies

Answer 1

Please refer to the JSfiddle: https://jsfiddle.net/8crqu6s2/

.row > a:nth-of-type(7) {
    display: none;
}

.row > a:nth-of-type(8) {
    display: none;
}

Reference: https://css-tricks.com/almanac/selectors/n/nth-of-type/