Only ccs styling of container which has specific number of children elements

Question

Is there any specific css selector to style container which contains specific numbers of children. For example:

<div class="container">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

So I need to apply 'justify-content: flex-start;' to .container only if it has 1, 5, 6 or 7 children. At other cases it has to contain 'justify-content: center;' property

Do you know the number of items youre going to be rendering? — Fabian S., Oct 29 '21 at 09:17
- I want to know if it is possible to implement this without JS. - I have the set of numbers, which were mentioned. — Ifenkiul, Oct 29 '21 at 09:21
nop, CSS is about styling and never sees the dom using it. This is a javascript job if it has to be sorted out on the fly, else , use an attribute in the markup so CSS can be applied from it. — G-Cyrillus, Oct 29 '21 at 09:40
are you OK with some hacks? I may have a solution for your specific case — Temani Afif, Oct 29 '21 at 09:41

score -1 · Answer 1 · answered Oct 29 '21 at 09:20

If you know the number of items youre about to render, add it as data attribute and use it for styling.

.container {
  justify-content: center;
}

.container[data-itemcount="1"],
.container[data-itemcount="5"].,
.container[data-itemcount="6"],
.container[data-itemcount="7"] {
  justify-content: flex-start;
}

<div class="container" data-itemcount="3">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

<div class="container" data-itemcount="4">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

<div class="container" data-itemcount="5">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

<div class="container" data-itemcount="7">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

Thanks. I have this way. But is there some specific selector for solvation. Without additional changes to template, using JS and so on? — Ifenkiul, Oct 29 '21 at 09:25
No, you can target a specific child in a container but you can not target a container from its contents in css only. Its kinda only "outside in", never "Inside out". — Fabian S., Oct 29 '21 at 09:42
So implementation with data-attribute will be the best. Thanks. — Ifenkiul, Oct 29 '21 at 09:52

Only ccs styling of container which has specific number of children elements

1 Answers1