Css Nth-Child Selector не выбирает ожидаемые элементы - PullRequest
Новая
       35

Css Nth-Child Selector не выбирает ожидаемые элементы

0 голосов
/ 12 мая 2018

Я пытаюсь выбрать 7-й и 8-й элементы каждого из следующих разделов, чтобы изменить отображение на 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>

Очевидно, что при выполнении ... 

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

... ничего не происходит, так как эти элементы не являются седьмым дочерним элементом родительского элемента.

Но когда я пытаюсь ... 

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

... ничего не происходит. Я не могу понять, что я делаю неправильно.

РЕДАКТИРОВАТЬ: использование тега в качестве класса было опечаткой. Мои извинения

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Пожалуйста, обратитесь к JSfiddle: https://jsfiddle.net/8crqu6s2/

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

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

Ссылка: https://css -tricks.com / almanac / селекторы / n / nth-of-type /

0 голосов
/ 12 мая 2018

Это работает для меня, ссылки 7 и 8 скрыты: я удалил . перед селектором a (это элемент, а не класс) и установил дочерние числа в 8 и 9, так как ваш <h1> считается ребенком.

a:nth-child(8) выбирает a, который является восьмым дочерним элементом своего родителя, поэтому здесь он .row.

Надеюсь, это поможет. 

a.recirc-rail_unit:nth-child(8), a.recirc-rail_unit:nth-child(9) {
  display: 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>
...