Two nth-child (coefficients) for different classes with row names in the same table
I have a table with 50 elements, some of which have an "event" or "comment" class. This is what the table row records look like:
Event, comment, event, comment, comment, comment, event
What I want to do is alternately change the row colors for both the "event" and "comment" class names. I currently have the following:
tr.event:nth-child(odd) {
background-color: #000;
}
tr.comment:nth-child(odd) {
background-color: #000;
}
With this code, I get the output:
Black (event), White (comment), Black (event), White (comment), Black (comment), White (comment), Black (event)I want the result to be like this:
Black (comment), White (event), White (comment), Black (comment), White (comment), Black (event)Any help would be great!
source to share
I don't think this is possible with pure css.
A very good answer to this same problem can be found here: Can I combine: nth-child () or: nth-of-type () with an arbitrary selector?
I recommend the following: add a new class to every odd element and the corresponding styling.
So you will have
.comment
.event
.comment.odd
.event.odd
.event
.event.odd
.comment
Etc
Otherwise, you can do it with js. But the extra class method should be good enough.
source to share
You are trying to imagine what is essentially hierarchical data with non-hierarchical HTML structure. nth-child
refers to the order of a child in its parent, not all children with some common class. Thus, you cannot do this in CSS.
Try to structure your HTML like this if you can:
<div>
<div class="event">
<div class="comment"></div>
</div>
<div class="event">
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
<div class="event">
</div>
</div>
Now you can style with
.event:nth-child(odd) { color: white; }
.event:nth-child(even) { color: black; }
.comment:nth-child(odd) { color: white; }
.comment:nth-child(even) { color: black; }
Since you feel like you want to start comments with the same color as the event it comes in, you will need to do:
.event:nth-child(odd) { color: white; }
.event:nth-child(odd) .comment:nth-child(odd) { color: white; }
.event:nth-child(odd) .comment:nth-child(even) { color: black; }
.event:nth-child(even) { color: black; }
.event:nth-child(even) .comment:nth-child(odd) { color: black; }
.event:nth-child(even) .comment:nth-child(even) { color: white; }
The above example uses elements div
. But if you really want to do it with a table, you can try using the following HTML and then use the same logic as above:
<table>
<thead><tr><td>Event</td></tr></thead>
<tbody>
<tr><td>Comment</td></tr>
</tbody>
<thead <tr><td>Event</td></tr></thead>
<tbody>
<tr><td>Comment</td></tr>
<tr><td>Comment</td></tr>
<tr><td>Comment</td></tr>
</tbody>
<thead><tr><td>Event</td></tr></thead>
</table>
Then write:
thead:nth-of-type(odd) { color: white; }
tbody:nth-of-type(even) tr:nth-child(odd) { color: white; }
tbody:nth-of-type(odd) tr:nth-child(event) { color: black; }
thead:nth-of-type(even) { color: black; }
tbody:nth-of-type(even) tr:nth-child(odd) { color: black; }
tbody:nth-of-type(odd) tr:nth-child(event) { color: white; }
This is not possible with pure CSS, you will need to use jQuery to add the class (or style if you like).
JQuery's indexing starts at 0, so what it thinks is even we think is odd.
I added a green color so you can see what's in the cell.
$('table').each(function() {
$('tr.comment:even').addClass('odd');
$('tr.event:even').addClass('odd');
});
tr.comment.odd {
background-color: #000;
}
tr.event.odd {
background-color: #000;
}
table {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="event">
<td>event</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="event">
<td>event</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="event">
<td>event</td>
</tr>
</table>
source to share