Почему не работает first-child для первого элемента?

Question

[Cepesh16]

jsfiddle.net/c6z047ne

Убираю границу справа для первого элемента

.outer_box:first-child .box {
	border-right: none;
}

Ничего не происходит.
Когда указываю nth-child(2) то все работает, но первый элемент считает как второй.

Почему first-child не работает здесь?

Answer 1

[lamer350]

Потому что outer_box b и есть у вас второй блок.
:first-child считает вложения внутри родителя не зависимо от совпадения класса, хоть вы и указали что .outer_box:first-child всеравно он применит стиль к .col-6 который и есть первым блоком внутри .row

Comments

[Cepesh16]

А можно как-то выбрать первый элемент по классу?

[lamer350]

Cepesh16, к сожалению нет, но вам при верстке (как мне кажется) проще добавить какой нибудь обнуляющий класс no-border например к которому привязать нужное вам свойство. По аналогии с px-0

Answer 2

[Евгений]

Потому что до этого элемента есть ещё блоки <div class="col-6"></div>

Comments

[Cepesh16]

А можно как-то выбрать первый элемент по классу?

[Евгений]

Cepesh16, оберните их в отдельный блок

Answer 3

[Ivan Bogachev]

first-child -> Ничего не происходит.
nth-child(2) -> работает, но первый элемент считает как второй

Ну давайте посчитаем:

<div class="row">
    <div class="col-6">...</div> <!-- Первый -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Второй. Определенно второй. -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Третий -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Четвертый -->
</div>

Возможно вам стоит еще разок почитать, как работают все эти псевдоклассы.

Comments

[Cepesh16]

А можно как-то выбрать первый элемент по классу?

[Ivan Bogachev]

Cepesh16, такого селектора в CSS пока нет. Можно соорудить обратный хак вроде такого:

.box {
	border-left: 1rem solid red;
}

.row > .outer_box ~ .outer_box .box {
	border-right: 1rem solid blue;
}

но лучше просто обернуть все аутер_боксы в свой контейнер. Это и понятнее будет, и поддерживать проще.