CODEWITHSUNDEEP
csshtml-tableelement
Prashanth Subramanian
Prashanth Subramanian

Reputation: 653

How to stop CSS element style from getting into my class style?

I have two styles, one which is at element level 'td' and another which is at class level '.specialTable td'. And I've run into some problems as the class level style is inheriting all the 'td' style properties if I have not specified them again.

I have a CSS style

td
{
  background-color:black;
}

and then I have 

.specialTable tr:nth-child(even) {
    background-color: white;
}

and

.specialTable td
{
  background-color:none;
}

What happens here is that even though I've asked.specialTable td to have no background, it inherits the black background from element style 'td' and this causes my element style 'tr' to be blocked out, because cells are on top of rows.

I am trying to set alternating row style to my table. Please help me with how I can stop the original 'td' element style from getting in the way.

Here is the fiddle: http://jsfiddle.net/PIyer/phADs/1/

Upvotes: 3

Views: 1412

Answers (5)

DarkAjax
DarkAjax

Reputation: 16223

You can use background-color:transparent; or depending on background:none;:

.specialTable td {
  background-color:transparent;
}

Upvotes: 0

npage
npage

Reputation: 1288

Try this out

 .specialTable tr td {
         background-color:transparent;
    }

using background none is incorrect, use transparent instead

http://jsfiddle.net/RBY2v/1/

Upvotes: 0

Axel
Axel

Reputation: 10772

You could simplify things, by using basic CSS overriding.

Let's say you have this:

<table class="specialTable">
    <tr>
        <td>This is an odd row</td>
    </tr>
    <tr>
        <td>This is an even row</td>
    </tr>
    <tr>
        <td>This is an odd row</td>
    </tr>
    <tr>
        <td>This is an even row</td>
    </tr>
</table>

And your default <td> style is this:

td { 
    background-color:black;
    color: #FFF;
}

To make alternating (zebra) styling to .specialTable, you can simply do this:

.specialTable tr:nth-child(even) td {
    background-color: blue;
}

This will override the original CSS defintion for <td> for all <td> tags within an even <tr> tag.

Check out a working example here: http://jsfiddle.net/rh5vV/

It's important to note that the nth-child sudo selector does not work in versions of IE8 and lower, so you may want to apply a class of .even to your even <tr> tags.

Upvotes: 1

acme
acme

Reputation: 14856

none is not a valid property for the background color. Try this:

.specialTable tr {
    background-color: black;
}

.specialTable tr:nth-child(even) {
    background-color: white;
}

Or you might use in your example just 

.specialTable td
{
    background-color: transparent;
}

This should let the white shine through.

Upvotes: 1

Bj&#246;rn M&#229;rtensson
Bj&#246;rn M&#229;rtensson

Reputation: 709

you have a type in your css, but im not sure if that is the problem

specialTable tr:nth-child(even) {
    background-color: white;
}

should be

.specialTable tr:nth-child(even) {
    background-color: white;
}

aslso background-color:none is not valid css , maybee background-color:transparent

Upvotes: 2

Related Questions