Можно ли связать псевдоклассы в селекторе: not? - PullRequest
Новая
       34

Можно ли связать псевдоклассы в селекторе: not?

0 голосов
/ 09 июля 2020

Я получил результат, который искал, но мне просто интересно, есть ли лучший способ добраться туда. У меня неизвестное количество элементов в контейнере сетки из 2 столбцов grid-template-columns: repeat(2, 1fr);. Между всеми элементами есть линии сетки, но не за их пределами. Я сделал это следующим образом: 

.parent > * {
    padding: 1.2rem 0;

    &:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    &:nth-last-child(2):nth-child(odd) {
      border-bottom: none;
    }

    &:nth-child(odd) {
      border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
  }

Мне интересно, есть ли лучший способ, чем сброс стиля границы на предпоследнем элементе, если он нечетный. Я не могу понять, почему что-то подобное не делает этого. 

&:not(:last-child):not(:nth-last-child(2):nth-child(odd)){
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Большое спасибо. С уважением, Джером

1 Ответ

0 голосов
/ 09 июля 2020

Это один из способов сделать это в одной строке.

Таргетинг на каждого четного дочернего элемента плюс каждого нечетного дочернего элемента, который не является предпоследним: 

.parent {
  margin-bottom: 1rem;
}
.parent > :nth-child(even), .parent > :nth-child(odd):not(:nth-last-child(2)){
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   padding-left: 1rem;
}
<div class="parent">
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
</div>

<div class="parent">
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
</div>
...