Как на css отследить первый ряд элементов?

Question

[Cheizer]

Друзья, непростая задача, лично я ума не приложу как реализовать. Есть "РЕЗИНОВЫЙ" блок, в нем дочерние блоки в два ряда по 6 штук. У каждого блока есть псевдоэлемент справа снизу. ВОПРОС, как сделать так, что бы у элементов ПЕРВОГО РЯДА скрывать эти псевдоэлементы? Если бы не адаптация, и всегда в первом ряду было 6 элементов, то легко, просто убираю у первых 6 элементов.

.item:nth-child(-n+6)::after{
  display:none;
}

но проблема в том, что при уменьшении окна браузера, блоки адаптируются, и в рядах их становится меньше, и все летит к чертям. Еще проблема, с крайними элементами справа, там тоже непонятно как скрыть псевдоэлементы :(

Вот так должно быть, круги это псевдоэлементы, они должны быть между блоками.


Но стоит изменить ширину окна и все летит в ад


Как это сделать адаптивным?
Вот живой пример https://codepen.io/Cheizer/pen/vYYpjyM

Comments

[Ankhena]

Из вашего кода не ясно, что должно происходить с шириной

flex: 1 calc((100%/6) - 180px);
    max-width: 170px;
    flex-basis: 170px;
    width: 100%;

Через @media писать условия кому нужен кружок.
Частично можно упростить с помощью overflow у родителя (и по-другому переписав отступы).
Проще на js посчитать, гораздо меньше кода будет.

Answer 1

[RAX7]

Наверное только так:

Comments

[Ankhena]

Точно, для псевдо же ширина 170 решит дело. Я зачем-то пыталась ее через calc посчитать и не осилила.

Я бы внесла рац.предложение
заменить:

.item::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  right: -30px;
  top: -30px;
  border-radius: 50%;
  border: 1px #000 solid;
  z-index: -2;
}

.item:last-child::after {
  display: none;
}

на

.item:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 100%;
  bottom: 100%;
  border-radius: 50%;
  border: 1px #000 solid;
  z-index: -2;
}

[Cheizer]

Ankhena, спасибо, сижу разбираюсь! Я вообще не понял что сделали :))

[Ankhena]

Роман Кузнецов, вкратце: overflow написали и подвинули под него лишнее. Нужные отступы распихали по другим блокам. Справа подложили псевдоэлемент с белым фоном (сделайте его красным, чтобы осознать ;) ), чтобы он перекрыл левые кругляхи.

[RAX7]

Ankhena, я тоже пытался и так и этак. Потом только понял, что за счет фиксированной ширины можно сделать такой финт ушами. Обновил фидл с учетом рац. предложениий =)

[Cheizer]

RAX7, Благодарю!

[RAX7]

Роман Кузнецов, не за что! с шириной у .item`а разберитесь, а то там какая-то вакханалия

[Cheizer]

RAX7, да, эту вакханалию flex: 1 calc((100%/6) - 180px); я переделаю :)

Answer 2

[Alexander Dozmorov]

Описание задачи и описание картинки расходятся.
Если принять за задачу то, что между всеми элементами должны быть кружки, независимо от ширины экрана, то делаешь псевдоэлементы для всех, и задаёшь `overflow: hidden` для общего контейнера, тем самым скрыв правые и нижние кружки.

Comments

[Cheizer]

Да, немного некорректно истолковал задачу, вы правы, так и решили ее.