Как сделать border-radius с :first-child правильно?

Question

[Аннушка ❤️]

У меня такая проблема произошла, долго мучаюсь, не могу никак разобраться.
Есть у меня 3 блока (.block), первые 2 блока имеют класс .mode--pc (это если пользователь с мобильного устройства, то скрывается блоки с помощью "display: none"). И я пытаюсь сделать :first-child так, что если стоит класс .mode--pc, то запретить делать стили border-radius.

Вот сам код:

.block:not(.mode--pc):first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.block:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 40px;
}

Если убрать :first-child, тогда работает, но просто если я добавлю еще один блок, то и второй блок без класса .mode--pc будет с border-radius.

Comments

[Ankhena]

Что-то интересное вы рассказываете и пишете.

Сначала, что "первые 2 блока имеют класс .mode--pc".
А потом .block:not(.mode--pc):first-child хотите задать border-radius первому элементу, если он не mode--pc.
Но из первой фразы следует, что так не бывает, потому что первый всегда с этим классом.

Попробуйте описать задачу получше.

[Аннушка ❤️]

Ankhena,

А потом .block:not(.mode--pc):first-child хотите задать border-radius первому элементу, если он не mode--pc.

вы всё правильно поняли, то есть из 3-х блоков, показывается только 1, который не имеет класс mode--pc.

[Ankhena]

miss_allegory, так? И вы хотите задать радиус этому третьему блоку с помощью first-child?

[Аннушка ❤️]

Ankhena, почти, я хочу задать радиус первому и последнему блоку который не имеет класса .mode--pc.

[Ankhena]

miss_allegory, оно могло бы сработать, если были бы разные теги через nth-of-type, но с классами так не работает.
Пишите js, если не знаете точного количества элементов.

[Аннушка ❤️]

Ankhena, мне нужно это сделать без применения js.

[Ankhena]

miss_allegory, .mode--pc + .block:not(.mode--pc)

[Аннушка ❤️]

Ankhena, помогло! Спасибо! Не расскажите как это работает? Даже и без :first-child он у вас работает как надо.

[Ankhena]

miss_allegory, fisrt-child находит первый дочерний элемент своего родителя, если он соответствует условию.
Он не может найти третий или какой-то ещё, как вы хотели.
А у меня обычные соседние селекторы и not.