Как не допускать банальных ошибок?

Question

[Lord_Dantes]

Довольно интересующийся назрел вопрос.
Есть элементы которые находятся впритык рядом.
У них есть border: 1px;
В макете то как:

А при верстке получатся вот так:

Вопрос, что нужно сделать чтобы полоски не создавали чувство 2px.
~
Когда ранее делал, то убирал с помощью парных, не парных псевдо-элементов. (even, odd).
Но сайт будет динамический, как быть?
Спасибо.

Answer 1

[Lord_Dantes]

Если кому понадобится.
Всем блокам кроме первого ставим:

border-right: 1px solid #E3E3E3;
border-left: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;

А первому даем значение в стиле:
border-top: 1px solid #E3E3E3;
Сори, за кликбейт.

Comments

[Henxed]

Слишком не элегантно и топорно - я бы сказал. Так никто не будет делать, для всего этого есть псевдо-классы. Вы получается каждый раз должны делать приписку\класс к первому или последнему элементу...

[Lord_Dantes]

Я описал так же само, как вы и описали ниже. Просто не упомянул присутствие псевдо-элементов.
Я не говорил "каждому" классу прописывать это.

Answer 2

[Henxed]

Используйте :last-child или :first-child

.list{
   padding: 7px;
   border: 1px solid #a2a2a2;
   border-bottom: 0;
}
.list:last-child{
   border-bottom: 1px solid #a2a2a2;
}

Comments

[Ankhena]

У автора правильнее ответ, потому что не перебиваются стили.
Альтернатива :not(:first-child) либо симметрично с last-child.