CODEWITHSUNDEEP
css
user1525612
user1525612

Reputation: 1994

CSS nth Selectors table rows

I want to target the following rows with CSS:

<tr class="r0"> *this one*
<tr class="r0">
<tr class="r1"> *this one*
<tr class="r1">
<tr class="r0"> *this one*
<tr class="r0">
<tr class="r1"> *this one*
<tr class="r1">
<tr class="r0"> *this one*
<tr class="r0">
<tr class="r1"> *this one*
<tr class="r1">

Thanks!

EDIT:

Apologies, I have forgotten to add an important part here!

Sometimes my table looks like this:

<tr class="r0">
<tr class="r1">
<tr class="r0">
<tr class="r1">
<tr class="r0">
<tr class="r1">

And in that case I dont need to target anything. So I only need to target it if it looks like the first code example. What's more, these two examples have the exact same classes and ID so there is no way of telling which one is being displayed.

Thanks!

EDIT:

this seems to work, almost 

tr.r0 + tr.r0 {
    background-color:red;
}

tr.r1 + tr.r1 {
    background-color:red;
}

http://jsfiddle.net/2BVRF/2/ maybe i could play around with that a bit. I would just need it to select the preceding element and not the following one :/

Upvotes: 1

Views: 1146

Answers (6)

Vitim.us
Vitim.us

Reputation: 22128

You can match the second rows but not the first ones.

.r0 + .r0,
.r1 + .r1{
    background-color: lightgray;
}

enter image description here

You can try to match the opposite by doing something like this.

.r0 + .r0 + .r1,
.r1 + .r1 + .r0{
    background-color: lightgreen;
}

enter image description here

But you can see that it does not match the first element, because CSS can't match backwards it just match forward or downwards the DOM Tree.

http://jsfiddle.net/62F4N/

But there's no limitation if you can javascript http://jsfiddle.net/62F4N/2/

var els=document.querySelectorAll('tr.r0,tr.r1');

for(var i=0; i<els.length; i++){
    var el = els[i];

    if(el.nextElementSibling && el.className==el.nextElementSibling.className){
        el.style.backgroundColor = "lightgreen";
    }
}

enter image description here

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

I don't have the idea for the second case that will handle with pure css but for the first case you can use like this

tr.r0:nth-child(odd){
    background-color: red;
}
tr.r1:nth-child(odd){
    background-color: red;
}

demo

Upvotes: 0

h-rai
h-rai

Reputation: 3964

I have tried the following code in jsfiddle. It works fine.

.special tr.r0:nth-child(odd) {
    background-color:red;
}

.special tr.r1:nth-child(odd) {
    background-color:red;
}

Upvotes: 0

Ming
Ming

Reputation: 4578

You can do this with the :nth-child selector.

table tr:nth-child(odd) td { background-color: #ccc; }

Here's a working example: http://jsfiddle.net/2BVRF/

[EDIT #2: classless]

Hmm, sorry, but there's no way to select the preceding element in CSS. You will need JS to accomplish this task, if the classes must stay the same.

This example uses jQuery, in order to select the preceding element:

http://jsfiddle.net/2BVRF/3/

[EDIT: new conditions of OP]

Unfortunately, given that you need to target one of the two tables, this method would no longer be all that helpful.

You would be better off assigning a class to the table to target the odd rows, which will leave the table you don't want to target alone.

Updated working example: http://jsfiddle.net/2BVRF/1/

Upvotes: 1

Idipaolo
Idipaolo

Reputation: 788

tr:nth-child (odd){
    /* Your style */
}

Upvotes: 1

TeejMonster
TeejMonster

Reputation: 105

According to http://www.w3schools.com/cssref/sel_nth-child.asp you'll want to do this:

tr:nth-child(2) {
  /* CSS goes here */
}

See http://www.w3schools.com/cssref/css_selectors.asp for more.

Upvotes: 0

Related Questions