Search code examples
csssassresponsive-designcss-selectorsless

Using nth-child, how to divide the children of a squared parent div into 4 different styling regions?

Say I have a square parent div with 100 children divs of equal sizes, similarly to the image below.

Using the :nth-child selector, how can I select the children on the upper-left, lower-left, upper-right, upper-right and give them different styling per section?

e.g.: select children 1-5, then 11-15, 21-25, 31-35, 41-45 and give them a red background.

1

This is what I have so far, currently only splits it in half, but I would like to split it in 4:

.children:nth-child(n+1):nth-last-child(n+51) {
  background-color: red;
}
.children:nth-child(n+51) {
  background-color: blue;
}
Solution

  • Use the "intersection" of selection "sets":

    .children {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid gray;
}

.children:is(
  /* Column 1 */
  :nth-child(10n + 1),
  /* Column 2 */
  :nth-child(10n + 2),
  /* Column 3 */
  :nth-child(10n + 3),
  /* Column 4 */
  :nth-child(10n + 4),
  /* Column 5 */
  :nth-child(10n + 5)
):nth-child(-n + 45) /* All elements up to 45 */ { 
  background-color: red;
}

.children:is(
  :nth-child(10n + 1),
  :nth-child(10n + 2),
  :nth-child(10n + 3),
  :nth-child(10n + 4),
  :nth-child(10n + 5)
):nth-child(n + 46) /* All elements from 46 onwards */ {
  background-color: slateblue;
}

.children:is(
  /* Column 6 */
  :nth-child(10n + 6),
  /* Column 7 */
  :nth-child(10n + 7),
  /* Column 8 */
  :nth-child(10n + 8),
  /* Column 9 */
  :nth-child(10n + 9),
  /* Column 10 */
  :nth-child(10n)
):nth-child(-n + 50) /* All elements up to 50 */ {
  background-color: lime;
}

.children:is(
  :nth-child(10n + 6),
  :nth-child(10n + 7),
  :nth-child(10n + 8),
  :nth-child(10n + 9),
  :nth-child(10n)
):nth-child(n + 51) /* All elements from 51 onwards */ {
  background-color: aqua;
}
    <div style="display: grid; grid-template-columns: repeat(10, auto); grid-template-rows: repeat(10, auto); width: max-content; border: 1px solid gray">
  <div class="children">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
  <div class="children">11</div>
  <div class="children">12</div>
  <div class="children">13</div>
  <div class="children">14</div>
  <div class="children">15</div>
  <div class="children">16</div>
  <div class="children">17</div>
  <div class="children">18</div>
  <div class="children">19</div>
  <div class="children">20</div>
  <div class="children">21</div>
  <div class="children">22</div>
  <div class="children">23</div>
  <div class="children">24</div>
  <div class="children">25</div>
  <div class="children">26</div>
  <div class="children">27</div>
  <div class="children">28</div>
  <div class="children">29</div>
  <div class="children">30</div>
  <div class="children">31</div>
  <div class="children">32</div>
  <div class="children">33</div>
  <div class="children">34</div>
  <div class="children">35</div>
  <div class="children">36</div>
  <div class="children">37</div>
  <div class="children">38</div>
  <div class="children">39</div>
  <div class="children">40</div>
  <div class="children">41</div>
  <div class="children">42</div>
  <div class="children">43</div>
  <div class="children">44</div>
  <div class="children">45</div>
  <div class="children">46</div>
  <div class="children">47</div>
  <div class="children">48</div>
  <div class="children">49</div>
  <div class="children">50</div>
  <div class="children">51</div>
  <div class="children">52</div>
  <div class="children">53</div>
  <div class="children">54</div>
  <div class="children">55</div>
  <div class="children">56</div>
  <div class="children">57</div>
  <div class="children">58</div>
  <div class="children">59</div>
  <div class="children">60</div>
  <div class="children">61</div>
  <div class="children">62</div>
  <div class="children">63</div>
  <div class="children">64</div>
  <div class="children">65</div>
  <div class="children">66</div>
  <div class="children">67</div>
  <div class="children">68</div>
  <div class="children">69</div>
  <div class="children">70</div>
  <div class="children">71</div>
  <div class="children">72</div>
  <div class="children">73</div>
  <div class="children">74</div>
  <div class="children">75</div>
  <div class="children">76</div>
  <div class="children">77</div>
  <div class="children">78</div>
  <div class="children">79</div>
  <div class="children">80</div>
  <div class="children">81</div>
  <div class="children">82</div>
  <div class="children">83</div>
  <div class="children">84</div>
  <div class="children">85</div>
  <div class="children">86</div>
  <div class="children">87</div>
  <div class="children">88</div>
  <div class="children">89</div>
  <div class="children">90</div>
  <div class="children">91</div>
  <div class="children">92</div>
  <div class="children">93</div>
  <div class="children">94</div>
  <div class="children">95</div>
  <div class="children">96</div>
  <div class="children">97</div>
  <div class="children">98</div>
  <div class="children">99</div>
  <div class="children">100</div>