Примените CSS к первому дочернему элементу и CSS к последнему дочернему элементу внутри элемента, но не если только дочерний

Question

Я ищу элегантное решение SASS для применения стиля к первому дочернему элементу и другого стиля к последнему элементу в элементе, но не к стилю, если это единственный дочерний элемент.

Как можно Я сделал sh что?

Примером будет:

• Если элемент является первым дочерним элементом в div, присвойте ему свойство margin-right 5px
• Если элемент является последним дочерним элементом в div, присвойте ему margin-left свойство `5px
• Если элемент является единственным дочерним в div, пусть margin-right и margin-left be 0.

Представьте, что у меня было следующее:

<div>
  <i>Item 1</i>
  <span>Item 2</span>
  <i>Item 3</i>
</div>

• Я бы ожидал, что Item 1 будет иметь margin-right свойство 5px, margin-left должно быть 0.
• Я бы ожидал, что к Item 2 не будут применены стили.
• Я бы ожидал Item 3 чтобы иметь margin-left свойство 5px, margin-right должно быть 0.

Если бы у меня был этот пример:

<div>
  <span>Item</span>
</div>

• I ожидал, что Item не будет применено ни одного стиля

Я пробовал что-то вроде этого:

div {
  i {
    &:first-child {
      margin-right: 5px;
    }
    &:last-child {
      margin-left: 5px;
    }
  }
}

Но это не работает, если у меня есть случай:

<div>
  <i>Item 1</i>
  <span>Item 2</span>
</div>

Поскольку Item 1 имеет свойства margin-right и margin-left, установленные в 5px когда я на самом деле хочу margin-right: 5px; margin-left: 0;.

Есть идеи, как это решить? Я немного заржавел на своих CSS -выборниках.

Answer 1

Просто добавьте условие, когда узел это единственный дочерний элемент

div {
  > * {
    &:first-child {
      margin-right: 5px;
    }
    &:last-child {
      margin-left: 5px;
    }
    &:only-child {
      margin: 0;
    }
  }
}

Answer 2

Небольшое изменение вашего правила SASS может дать вам желаемый результат. Попробуйте следующее правило SASS.

div {
  i {
    &:first-of-type {
      margin-right: 5px;
    }
    &:last-child {
      margin-left: 5px;
    }
  }
}