0

I would like to apply css (break-inside: avoid;) to any parent div who has more than x children. Here is an example:

<div class="section">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

If the section has, for example, less than 4 children I want to use break-inside: avoid;. Otherwise break-inside: auto;. I tried with nth-child/last-child without success

Thanks

Edwin ZAP
  • 419
  • 1
  • 4
  • 16
  • Not really cause I dont want a fixed number but a min/max number – Edwin ZAP Jun 07 '21 at 21:27
  • The main takeaway from the duplicate question I posted is that `styles cannot be applied to a parent node based on the number of children it has. However, styles can be applied to the children nodes based on the number of siblings they have.` However, javascript is able to detect the number of children a div has, and could conditionally apply a CSS class to that div. – WOUNDEDStevenJones Jun 07 '21 at 21:29
  • So does it mean that it's only possible with js? I'm not sure if js will work in my case cause I use raw html that I assign to the innerHtml property – Edwin ZAP Jun 07 '21 at 21:31
  • CSS is content unaware. It cannot detect how many children elements there are and then add styling. What you can do is set a class on the containing element if it meets that criteria using whatever method you are using to generate the markup. – disinfor Jun 07 '21 at 21:35
  • Thanks. Will need to do something in js then – Edwin ZAP Jun 08 '21 at 14:21

0 Answers0