Есть ли способ выбрать последний элемент div с соседними элементами, не являющимися элементами div, только с CSS? - PullRequest
Новая
       3

Есть ли способ выбрать последний элемент div с соседними элементами, не являющимися элементами div, только с CSS?

0 голосов
/ 27 мая 2020

Рассмотрим мой эксперимент с кодом

Я думал, что: last-child и подобные псевдоселекторы нацелены только на один и тот же родственный элемент. В моем эксперименте это был бы элемент div. Но в моем коде кажется, что если есть ЛЮБОЙ брат, который идет после последнего элемента div, то последний элемент div больше не является последним дочерним элементом.

Есть ли способ выбрать последний элемент div с помощью соседние братья и сестры, не являющиеся элементами div, только с CSS?

Прямо сейчас, кажется, мой единственный вывод - структурировать мой HTML иначе, чтобы последний div был последним элементом в его родительском элементе. Надеюсь, у кого-то есть другой ответ! 

.container {
  background-color: green;
}

.row {
  width: 90%;
  background-color: black;
  margin: 0 auto;
}

.row:not(:last-child) {
  margin-bottom: 8rem;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row .col-1-of-2 {
  float: left;
  background-color: orangered;
  color: #fff;
  width: calc((100% - 6rem)/2);
}

.row .col-1-of-2:not(:last-child) {
  margin-right: 6rem;
}

h1 {
  text-align: center;
}
<div class="container">
  <div class="row">
    <div class="col-1-of-2">Col 1 of 2</div>
    <div class="col-1-of-2">Col 1 of 2</div>
  </div>
  <div class="row">
    <div class="col-1-of-2">Col 1 of 2</div>
    <div class="col-1-of-2">Col 1 of 2</div>
  </div>
  <h1>Test</h1>
</div>

1 Ответ

0 голосов
/ 27 мая 2020

Вы можете сделать это с помощью :last-of-type, который представляет последний элемент своего типа среди группы родственных элементов.

Итак, ваш окончательный код должен быть примерно так: 

.container {
  background-color: green;
}

.row {
  width: 90%;
  background-color: black;
  margin: 0 auto;
}

.row:not(:last-of-type) {
  margin-bottom: 8rem;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row .col-1-of-2 {
  float: left;
  background-color: orangered;
  color: #fff;
  width: calc((100% - 6rem)/2);
}

.row .col-1-of-2:not(:last-child) {
  margin-right: 6rem;
}

h1 {
  text-align: center;
}
<div class- "container">
  <div class="row">
    <div class="col-1-of-2">Col 1 of 2</div>
    <div class="col-1-of-2">Col 1 of 2</div>
  </div>
  <div class="row">
    <div class="col-1-of-2">Col 1 of 2</div>
    <div class="col-1-of-2">Col 1 of 2</div>
  </div>
  <h1>Test</h1>
</div>
...