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

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>

Answer:

You're trying to tell CSS to:

1. find parents which have multiple children
2. 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.

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>

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; }