将 CSS 应用于第一个子元素，将 CSS 应用于元素内部的最后一个子元素，但如果只有子元素则不适用

Question

I'm looking for an elegant SASS solution to apply a style to the first child and a different style to the last one inside an element, but then no style if it's the only child.

How could I accomplish that?

An example would be:

• If the element is the first child in a div , give it a margin-right property of 5px
• If the element is the last child in a div , give it a margin-left property of `5px
• If the element is an only child in a div , let margin-right and margin-left be 0 .

Imagine I had the following:

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

• I'd expect Item 1 to have a margin-right property of 5px , margin-left should be 0 .
• I'd expect Item 2 to have no styles applied to it.
• I'd expect Item 3 to have a margin-left property of 5px , margin-right should be 0 .

If I had this example:

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

• I'd expect Item to have no styles applied to it

I've tried something like this:

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

But this doesn't work if I have the case:

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

Because Item 1 has both margin-right and margin-left properties set to 5px when I actually want margin-right: 5px; margin-left: 0; margin-right: 5px; margin-left: 0; .

Any ideas on how to solve this? I'm a little rusty on my CSS-Selectors.

Answer 1

A slight modification to your SASS rule could give your the result you want. Try the following SASS rule.

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

Answer 2

Just add a condition when the node it's the only child

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