Search code examples
htmlcsscss-selectorspseudo-class

Add padding to all childs except last


I am trying to add padding to all child elements of a div except the last one.

I tried using the negation for last-child but it doesn't even add padding to the rest of the child elements when I use that...

Here is my HTML:

#container .description:not(:last-child) {
  padding-bottom: 10px;
}
<div id="container">
  <h3>Title</h3>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 1</div>
  </div>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 2</div>
  </div>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 2</div>
  </div>
  Testing here
</div>

JSFiddle Demo


Solution

  • The following rule should be what you're looking for. It will add 10px of padding to all descriptions except the one in the last .box element:

    #container .box:not(:last-child) .description{
        padding-bottom:10px;
    }
    

    Example fiddle