CODEWITHSUNDEEP
htmlasp.netcsshtml-table
NicoTek
NicoTek

Reputation: 1167

TR Css Class same as TR before it

I have a table and I want certain tr to have the same css class as the tr before it.

in the example below the tr with class="?" should have the same class as the ones above. is this possible?

<table>
  <tr class="red">
    <td></td>
  </tr>
  <tr class="?">
    <td></td>
  </tr>
  <tr class="blue">
    <td></td>
  </tr>
  <tr class="?">
    <td></td>
  </tr>
</table>

Upvotes: 0

Views: 1609

Answers (6)

forX
forX

Reputation: 2153

based on Karl idea.

Use Jquery

http://jsfiddle.net/forX/KBfzD/

$(function(){
    $(".unknown").each(function()
                       {

                           $(this).removeClass("unknown");
                           $(this).addClass( 
                                           $(this)
                                          .prev()
                                           .attr("class")
                           );
                       });
});

I change the ? for unknown. I dont know how to use ? in css/css selector.

Upvotes: 1

kangoroo
kangoroo

Reputation: 357

without javascript, you can play with element:li:nth-child(x) values can be anything like n, n+1, 2n+1, etc... and you can give them different values.

Upvotes: 0

KKS
KKS

Reputation: 3630

Based on what you have mentioned, this is the fiddle. It just checks the previous element of class: ?

Upvotes: 0

Vamsi Pavan Mahesh
Vamsi Pavan Mahesh

Reputation: 250

Every html element is addressable with css, so in the stylesheet of your css,if you decalre like element{
set the desired property ; }
In this case the element would be tr all the table rows will have the properties you have set in above general declaration ,and if you want to override the specific values to some of your table rows you can address them like using the class

Upvotes: 1

Dawid
Dawid

Reputation: 774

I am not pretty sure about understanding this problem but:
in css: tr.classname + tr gives you the next tr from tr which has a classname. See this Fiddle.
You can also checkout css nth-child,even & odd selectors.

Upvotes: 0

Karl Anderson
Karl Anderson

Reputation: 34844

Try this:

HTML:

<table border="1" style="border-collapse:collapse;">
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
</table>

jQuery:

$(function(){
    $("tr").addClass("red");
    $("tr:nth-child(4n)").removeClass("red").addClass("blue")
        .prev().removeClass("red").addClass("blue");
});

This will select every 4th child, remove the red CSS class, add the blue CSS class and the move to the previous element and do the same.

Note: Here is a jsFiddle that you can play around with.

Upvotes: 1

Related Questions