Как убрать бордер у блока?

Question

[MRcracker]

Есть 6 блоков. У них следующий css код

<div class="col-md">
                    <a href="#" class="services-item">
                                <img class="img-fluid" src="img/ico.svg">
                            <div class="text">
                                текст
                            </div>
                        </a>
                    </div>

.item{
		padding: 25px 25px
		display: block
		border-right: 1px solid darken($gray, 5%)
		border-bottom: 1px solid darken($gray, 5%)
		height: 100%
}

Как сделать, чтобы у 3 блока и 6 пропадали рамки?

Answer 1

[Вадим Кот]

.item:nth-child(3n) {
  border: none;
}

codepen

с бутстрап обертками:

.col-md:nth-child(3n) .services-item{
  border: none;
}

codepen

Comments

[ll_sseabreez_ll]

а как сделать это через js?

Answer 2

[Петр]

nth-child свойство посмотрите.

Comments

[MRcracker]

не применяется если указать по номеру, а если для last-child сделать. то у всех пропадает рамка. Как правильно применить?

[tyzberd]

а если для last-child сделать. то у всех пропадает рамка.

у вас каждый .item не обернут еще в блок?

[MRcracker]

обернут в col-md от бутстрап

[Вадим Кот]

MRcracker, А почему тогда в вопросе не предоставили разметку? Кто должен угадывать, во что обернуты ваши items?

[MRcracker]

Вадим Кот, добавил)))

Answer 3

[dicem]

Ну я тут слышу, что у человека не работает. Тогда вот вам самое радикальное решение:

.item:nth-child(3),
.item:nth-child(6) {
  border: none !important;
}

Answer 4

[tyzberd]

все применяется, только с разметкой не понятно какая у вас
https://jsfiddle.net/0ok26mju/
https://jsfiddle.net/nj29831z/
ну и это еще css.yoksel.ru/specifity