Как без добавления лишних классов задать border только с определенных сторон

Рейтинг: 0Ответов: 5Опубликовано: 01.08.2023

Надо чтобы border был как на картинке (боковые границы принадлежат родительскому блоку) : у всех кто стоит слева-нет левой границы, все в верхней строке не имеют верхнюю границу, элементы прижатые к правому краю не имею правую границу, последний элемент должен иметь только верхнюю (не обязательно) и правую границу.

Но я не хочу присваивать столько class для элементов. Можно ли это сделать через: :first-child, :last-child

введите сюда описание изображения

    .p {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-content: center;
    width: 700px;
    height: 900px;
    }

    .o {
    padding: 30px;   
    flex: 1 1 calc(100% / 3);
    box-sizing: border-box;
    background: greenyellow;
    }

    .bb {
    border-bottom: 5px solid rebeccapurple;
    }

    .br{
    border-right: 5px solid rebeccapurple; 
    }

    .item7 {
    flex: 0 1 calc(100% / 3);
    }
<div class="p">
     <div class="o bb br">1</div>
     <div class="o bb br">2</div>
     <div class="o bb">3</div>
     <div class="o bb br">4</div>
     <div class="o bb br">5</div>
     <div class="o bb br">6</div>
     <div class="o br item7 ">7</div> 
</div>

css border
Источник: Stack Overflow на русском

Ответы

▲ 2

Посмотрите эту реализацию через дополнительные обёртки и overflow: hidden

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  padding: 20px;
  padding: 50px 0;
  border-left: 2px solid red;
  border-right: 2px solid red;
}

.container {
  overflow: hidden;
}

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: -4px;
}

.item {
  background: lime;
  padding: 30px;
  border: 4px solid black;
  margin: -2px;
}
<div class="wrapper">
  <div class="container">
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
    </div>
  </div>
</div>

▲ 1

Вариант с таблицей:

* { box-sizing: border-box; }

.p {
  width: 700px;
  border-spacing: 0;
  border-collapse: collapse;
}

.o {
  padding: 30px;
  background: greenyellow;
}

.o:not(:nth-child(3n)) {
  border-right: 5px solid rebeccapurple;
}

.p tr:not(:last-child) .o
{
  border-bottom: 5px solid rebeccapurple;
}
<table class="p">
  <tr>
    <td class="o">1</td>
    <td class="o">2</td>
    <td class="o">3</td>
  </tr>
  <tr>
    <td class="o">4</td>
    <td class="o">5</td>
    <td class="o">6</td>
  </tr>
  <tr>
    <td class="o">7</td>
  </tr>
</table>

▲ 0

Окей, у нас есть информация, что у нас всего три колонки и они одинаково размера, в связи с этим мы можем вполне воспользоваться псевдоклассом :nth-child.

.p {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-content: center;
  width: 700px;
  height: 900px;
}

.o {
  padding: 30px;
  flex: 1 1 calc(100% / 3);
  box-sizing: border-box;
  background: greenyellow;
}

.o {
  border-bottom: 5px solid rebeccapurple;
}

.item7 {
  flex: 0 1 calc(100% / 3);
}

.o:not(:nth-child(3n)) {
  border-right: 5px solid rebeccapurple;
}
<div class="p">
  <div class="o">1</div>
  <div class="o">2</div>
  <div class="o">3</div>
  <div class="o">4</div>
  <div class="o">5</div>
  <div class="o">6</div>
  <div class="o item7">7</div>
</div>

Но есть проблема, она заключается в нижнем бордере для последней строки. Я думаю вам стоит переделать верстку на таблицу, тогда мы сможем и это избежать.

▲ 0

Ответов уже предостаточно, но вот идея с переменными, на случай, если количество колонок надо будет сделать переменным. Впрочем, в конструкцию :nth-child(3n) переменную встроить с ходу не смог. Но может быть сами догадаетесь или подскажет кто-то.

:root {
  --column-count: 3;
}

.p {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-content: center;
  width: 700px;
  height: 900px;
}

.o {
  padding: 30px;
  flex: 1 1 calc(100% / var(--column-count));
  box-sizing: border-box;
  background: greenyellow;
}

.o {
  border-bottom: 5px solid rebeccapurple;
}
.o:last-child {
  border-bottom: 0px solid transparent;
}

.item7 {
  flex: 0 1 calc(100% / var(--column-count));
}

.o:not(:nth-child(3n)) {
  border-right: 5px solid rebeccapurple;
}
<div class="p">
  <div class="o">1</div>
  <div class="o">2</div>
  <div class="o">3</div>
  <div class="o">4</div>
  <div class="o">5</div>
  <div class="o">6</div>
  <div class="o item7 ">7</div>
</div>

Переменную добавил в :root, чтобы видна была везде, но последнюю конструкцию, как уже писал выше - не одолел.

▲ 0

    table {
      width: 900px;
      height: 700px;
      border-collapse: collapse;
      background: greenyellow;
    }
    tr:nth-child(1) {
      border-bottom: 5px solid rebeccapurple;
    }
    tr:nth-child(2) {
      border-bottom: 5px solid rebeccapurple;
    }
    td:nth-child(1) {
      border-right: 5px solid rebeccapurple;
    }
    td:nth-child(2) {
      border-right: 5px solid rebeccapurple;
    }
 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>border</title>
</head>
<body>
  <table border="0">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table>
</body>
</html>

Можете рассмотреть вот такой вариант с таблицей. Тут вообще необходимость создания классов сведена к минимуму