Как я могу получить доступ к свойству стиля последнего элемента в динамической вложенной структуре?

Question

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

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

<div class="parent category">...</div>
<div class="parent category">...</div>
<div class="parent category">
    ...
    <div class="child category">...</div>
    <div class="child category">...</div>
    <div class="child category">...</div>
</div>
<div class="parent category">
    ...
    <div class="child category">...</div>
</div>

Я пытался использовать sass для доступа к &:last-child и &:last-of-type на родительском и дочернем элементах, но в результате только дочерние категории получили нижнюю границу. Мой класс категории выглядит так:

.category {
    padding: 8px 20px;
    background-color: #fff;
    border-top: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
}

РЕДАКТИРОВАТЬ: Это то, как мой список в настоящее время выглядит, и мне просто нужно, чтобы эти отмеченные области были покрыты границей, чтобы соответствовать.

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

Answer 1

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

.parent {
  background:#eee;
}
.content {
  background:#fff;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 10px 20px;
  
  /* give everything a border */
  border-top: 1px solid red;
  /*pull top back over previous element up so it doesn't cause double borders */
  margin-top:-1px;
}

.parent > .child {
  margin-left: 50px;
 }

<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>

Answer 2

Я думаю, вы ищете что-то вроде этого

.parent-category>.child-category:last-child {
  color:red;
  font-weight: bold
}

Я создал для тебя скрипку https://jsfiddle.net/prd5yeot/1/