How to add CSS if element has more than 2 child?

Question

I have div with some child element, my requirement is if there is 2 child they take 50%-50% with of parent but if there are more than 2 child element they should we take 100% with each. only with css

senerico one :

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>

expect result child width 50%

senerico two :

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

expect result child width 100%

https://alistapart.com/article/quantity-queries-for-css/, https://quantityqueries.com — CBroe, Mar 04 '21 at 08:54

score 1 · Answer 1 · answered Mar 04 '21 at 08:56

nth-last-child() can help you:

.parent {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid;
  margin: 5px;
}

.parent .child {
  height: 50px;
  background: green;
  border: 1px solid red;
  width: 50%;
  box-sizing: border-box;
}

.parent .child:nth-last-child(n + 3),
.parent .child:nth-last-child(n + 3)~* {
  width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

How to add CSS if element has more than 2 child?

1 Answers1