jquery - problems understanding nth-of-type selector -


i'm struggling on i've never found difficult :s have objects class .everyday (are every cell each day of month), have differentiate objects being: 5 green 3 red consecutively, starting on 3rd element. first 2 must red.

well, i've though jquery:

$(document).ready(function() { $("td.everyday:nth(0), td.everyday:nth(1)").css({"background-color": "red", "color" : "white"}); $("td.everyday:nth-of-type(4n+4), td.everyday:nth-of-type(5n+5)").css({"background-color": "green", "color" : "white"});

});

and no way working! have tried existing numbers! -___- , have how works, not 100% clear , maybe less clear though... knows how use , can explain me?

cheers!

update:

it closer need, however, not right doesn't follow 5 red 3 green whole year (starting on 3rd element):

enter image description here

so if can still explain me how nth-child , numbers within parenthesis work... better! don't want solution, want myself understanding i'm doing :s thank helping!

and page source:

from browser console

<table class="t"><tbody><tr><th>2016</th><th>dl</th><th>dt</th><th>dc</th><th>dj</th><th>dv</th><th>ds</th><th>dg</th><th>dl</th><th>dt</th><th>dc</th><th>dj</th><th>dv</th><th>ds</th><th>dg</th><th>dl</th><th>dt</th><th>dc</th><th>dj</th><th>dv</th><th>ds</th><th>dg</th><th>dl</th><th>dt</th><th>dc</th><th>dj</th><th>dv</th><th>ds</th><th>dg</th><th>dl</th><th>dt</th><th>dc</th><th>dj</th><th>dv</th><th>ds</th><th>dg</th><th>dl</th><th>dt</th></tr><tr><td>gener</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td><td class="blank"></td><td class="blank"></td></tr><tr><td>febrer</td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>març</td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>abril</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>maig</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td></tr><tr><td>juny</td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>juliol</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td><td class="blank"></td><td class="blank"></td></tr><tr><td>agost</td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>setembre</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>octubre</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td><td class="blank"></td></tr><tr><td>novembre</td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>decembre</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadadia">1</td><td class="cadadia">2</td><td class="cadadia">3</td><td class="cadadia">4</td><td class="cadadia">5</td><td class="cadadia">6</td><td class="cadadia">7</td><td class="cadadia">8</td><td class="cadadia">9</td><td class="cadadia">10</td><td class="cadadia">11</td><td class="cadadia">12</td><td class="cadadia">13</td><td class="cadadia">14</td><td class="cadadia">15</td><td class="cadadia">16</td><td class="cadadia">17</td><td class="cadadia">18</td><td class="cadadia">19</td><td class="cadadia">20</td><td class="cadadia">21</td><td class="cadadia">22</td><td class="cadadia">23</td><td class="cadadia">24</td><td class="cadadia">25</td><td class="cadadia">26</td><td class="cadadia">27</td><td class="cadadia">28</td><td class="cadadia">29</td><td class="cadadia">30</td><td class="cadadia">31</td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr></tbody></table> 

here css solution get:

5 green 3 red consecutively, starting on 3rd element

.everyday:nth-child(1n+3) {      background-color: green;  }    .everyday, .everyday:nth-child(8n), .everyday:nth-child(8n+9), .everyday:nth-child(8n+10) {      background-color: red;      color: white;  }
<div class="everyday">1</div>  <div class="everyday">2</div>  <div class="everyday">3</div>  <div class="everyday">4</div>  <div class="everyday">5</div>  <div class="everyday">6</div>  <div class="everyday">7</div>  <div class="everyday">8</div>  <div class="everyday">9</div>  <div class="everyday">10</div>  <div class="everyday">11</div>  <div class="everyday">12</div>  <div class="everyday">13</div>  <div class="everyday">14</div>  <div class="everyday">15</div>  <div class="everyday">16</div>  <div class="everyday">17</div>  <div class="everyday">18</div>  <div class="everyday">19</div>  <div class="everyday">20</div>  <div class="everyday">21</div>  <div class="everyday">22</div>  <div class="everyday">23</div>  <div class="everyday">24</div>  <div class="everyday">25</div>  <div class="everyday">26</div>  <div class="everyday">27</div>  <div class="everyday">28</div>  <div class="everyday">29</div>  <div class="everyday">30</div>  <div class="everyday">31</div>

:nth-child(1n+3) 

select children starting @ 3

:nth-child(8n) 

override previous css rule selecting 8nth (5+3) elements starting @ 8, , on 9, 10 elements selected using :nth-child(8n+9) & :nth-child(8n+10)


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

android - Go back to previous fragment -