How to Alternate The Number of Children Between Odd and Even Rows

How can I alternate the number of children between odd and even rows?

nth-child(5n) would be what you need to start from for a repeating pattern, négative value added can make it start before the first five elements so you can tune it to have the first three in a row.

possible example:

• flex

body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

div {
  flex-grow: 1;
  min-width: 30%;
  /*extra  whatever */
  background: #05709C;
  height: 15vh;
  border-radius: 0.5em;
}
/* make it start earlier */
div:nth-child(5n - 11),
div:nth-child(5n - 10) {
  min-width: 40%;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Jquery - How to alternate an :Odd :Even pattern every 4 Divs?

var i = 1;
$('#wrapper > div').each(function()
{
    var isEvenRow = Math.ceil(i / 4) % 2 == 0; // 4 is number of columns
    var isCellAlternate = i % 2 == isEvenRow ? 0 : 1;

    if ( isCellAlternate ) {
        $(this).css("background-color", "#000");
    } else {
        $(this).css("background-color", "#ccc");
    }
    i++;
});​

or the less readable but shorter version:

var i = 1;
$('#wrapper > div').each(function() {
    if (i % 2 == (Math.ceil(i / 4) % 2 == 0) ? 0 : 1) $(this).css("background-color", "#000");
    else $(this).css("background-color", "#ccc");
    i++;
});​

essentially you change the test for the alternate cell every row.

How to use :nth-child for alternate rows

You are almost there. you need to use :nth-child(even) to style even rows and :nth-child(odd) to style odd rows. For the further reference you can go through nth-child() Selector

Here is a small demo

div:nth-child(odd) {  height: 100px;  width: 100px;  background: yellow;  margin: 20px auto;}
div:nth-child(even) {  height: 100px;  width: 100px;  background: green;  border-top: 5px solid black;  border-bottom: 5px solid red;  margin: 20px auto;}

<div>odd</div><div>even</div><div>odd</div><div>even</div>

Selecting odd/even rows in table with child rows

I found a workaround, though semantically it's a bad idea. Using a DIV for a child row instead, but this required changing a few properties on the table itself. Another caveat is, the DIV has to be inserted after the table creation. Placing it in the HTML itself doesn't work (as one would expect). For me, this isn't an issue as the these child rows are built dynamically after the table creation.

function expand(index){

    row = $('tbody').children('tr')[index];
  
  var tr = $('<div class="childrow">asjdfhakljsdhlfk ahsdjkf hajkldsf</div>');
  
  tr.insertAfter(row);

}

expand(2);

table{border-collapse: collapse;width:100%;
display:flex;flex-flow:column;
}
tbody{flex:1 1 auto; display:block;overflow:hidden auto;}
tr{display:table;table-layout:fixed;width:100%}
thead tr{flex: 0 0 auto;}

.childrow {width:100%;height:50px;background:#555;padding:8px;color:white;}

tr:nth-of-type(even){background:yellow}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="1">
<thead>
  <tr><th>H 1</th><th>H 2</th><th>H 3</th></tr>
</thead>
<tbody>
  <tr class="row"><td>1.1</td><td>1.2</td><td>1.3</td></tr>
  <tr class="row"><td>2.1</td><td>2.2</td><td>2.3</td></tr>
  <tr class="row"><td>3.1</td><td>3.2</td><td>3.3</td></tr>
  <tr class="row"><td>4.1</td><td>4.2</td><td>4.3</td></tr>
  <tr class="row"><td>5.1</td><td>5.2</td><td>5.3</td></tr>
  <tr class="row"><td>6.1</td><td>6.2</td><td>6.3</td></tr>
</tbody>
</table>

Select odd even child excluding the hidden child

Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.

If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.

If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

Even trying to do something tricky like

.box[class='box']:nth-of-type(even)

doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.

I'm not sure there's any way to do this purely with CSS - I can't think of any right now.

How can I style even and odd elements?

Demo: http://jsfiddle.net/thirtydot/K3TuN/1323/

li {    color: black;}li:nth-child(odd) {    color: #777;}li:nth-child(even) {    color: blue;}

<ul>    <li>ho</li>    <li>ho</li>    <li>ho</li>    <li>ho</li>    <li>ho</li></ul>

---

Related Topics