Not adding a css property to a last child inside a nested div- CSS

Question

I want to add certain property to a specific <div>, here's my structure:

<div class="container">
<div class="parent">
  <div class="child1">
  <div class="child2">
</div>
<div class="parent">
  <div class="child1">
  <div class="child2">
</div>
<div class="parent">
  <div class="child1">
</div>
</div>

Now I'm trying to apply css border property on class="child1" except for the last div that has only class="child1". I tried:

.container {
   & > div.child1:not(:last-child) {
    border-right: none;
   }
}

But this doesn't work. Any ideas around?

Your selector is wrong. You do not need the first > as the child divs are not DIRECT children of the container — Paulie_D, Mar 03 '20 at 07:55

m_sultan · Accepted Answer · 2020-03-03T09:04:04.927

1

.container .parent:not(:last-child) .child1{
  border-right: none;
}

You should select the last parent and in your case you're using ">" which selects a direct child of the container

edited Mar 03 '20 at 09:04

answered Mar 03 '20 at 08:01

m_sultan

383
3
13

@user1234 `Now I'm trying to apply css border property on class="child1" except for the last div THAT HAS ONLY class="child1"`, this answer will apply the CSS to child1 of all parents except the last parent, but **regardless of if that last parent has 1 child or multiple** it won't get the CSS – evilReiko Mar 04 '20 at 05:39
if he needs the parent that only has 1 child he could use :only-of-type. for example: .container .parent .child1:only-of-type – m_sultan Mar 04 '20 at 07:08

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Answer:

You're trying to tell CSS to:

find parents which have multiple children
then find specific child in each of these parent(s)

As of 2020, this is not supported by pure CSS, and the answer is ironically from 2009. Read this, this, and this.

Other Workarounds:

A) By jQuery (or similar solution by JS)

// Find all parents
$('.parent').each(function() {
    // Find all children of this parent
    var $children = $(this).find('div[class^="child"]');
    if($children.length > 1) {// if has 2 or more children
        $children.css('borderRight', 'none');
        // -- or --
        $children.addClass('my_child_no_border_class');
    } else {// Has 1 or 0 children
        $children.css('borderRight', '1px solid red');
        // -- or --
        $children.addClass('my_child_border_class');
    }
});

If you prefer adding classes, make sure to create CSS classes .my_child_border_class and .my_child_no_border_class

B) By HTML & CSS

Add special classes for children with border and no border:

<!-- HTML -->
<div class="container">
    <div class="parent">
        <div class="child1 noborder">
        <div class="child2">
    </div>
    <div class="parent">
        <div class="child1 noborder">
        <div class="child2">
    </div>
    <div class="parent">
        <div class="child1 withborder">
    </div>
</div>

<!-- CSS -->
.noborder {
    border-right: none;
}
.withborder {
    border-right: 1px solid red;
}

C) By CSS

/* All child1 get this css */
.parent > child1 {
    border-right: none;
}

/* then we override last parent's child1 with different css */
.parent:last-child > child1 {
    border-right: 1px solid red;
}

Conclusion:

There might be other workarounds, but not pure CSS solution.

score 1 · Answer 3 · answered Mar 03 '20 at 13:24

Your selector is wrong. You do not need the first > as the child divs are not DIRECT children of the container

 .container {
  width: 80%;
}

.container .child1:not(:last-child) {
  border-right: 3px solid red;
}

.parent {
  margin-bottom: 1em;

<div class="container">

  <div class="parent">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
  </div>
  <div class="parent">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
  </div>
  <div class="parent">
    <div class="child1">Child 1</div>
  </div>

</div>

score 0 · Answer 4 · answered Mar 03 '20 at 07:26

You can target the last parent and child1 like this.

.parent {
  padding: 1rem;
  background-color: deepskyblue;
}

.child1 {
  height: 3rem;
  background-color: aqua;
}

.parent:last-child > .child1 {
  background-color: lime;
}

<div class="container">
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="parent">
    <div class="child1"></div>
  </div>
</div>

score -1 · Answer 5 · answered Mar 03 '20 at 07:46

you can add a nother class to the last div or an id so you can target it as follow:

<div class="container"> 
    <div class="parent"> 
        <div class="child1"></div>
        <div class="child2"></div> 
    </div> 
    <div class="parent"> 
        <div class="child1"></div> 
        <div class="child2"></div> 
    </div> 
    <div class="parent"> 
        <div class="child1 last-child" id="child"></div>
   </div>
 </div>

and css property as follow:

.last-child  {
 border-right: none;
 }