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


Tags: css,class,styles,element,html-table

Problem :

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/

Thanks!



Solution :

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


    CSS Howto..

    How To Add Static Image to Table

    How to hover over a div to change just a part of its background?

    How to make a logo css slider?

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    How to wrap a div containing text around a div containing an image?

    How do I use CSS to to vertically center align an image in a div?

    How to make an overlay using css hover on another element and pseudo class ::before

    How to access CSS children properly?

    How to hide desktop css from iphone browser?

    How to do responsive text overflow with css?

    Show image when hovering on a span

    How to keep curved borders using css 3

    How to set the maximum height of CSS images?

    toggle show/hide for hidden menu buttons (responsive)

    3 column css how to make the columns even?

    How to reference a Div after each h3

    how to apply jquery ui/css to forum field

    How to create a fixed div inside an another div?

    Why does a div with background-color show fixed elements below?

    How to I change this css psuedo button in Javascript/Jquery

    How to write persistent CSS box rules?

    How do you indent subsequent lines of text using

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How to make input[type=text] to fill remaining horizontal space?

    How can I set my unordered list to be in the middle not in-line (see image)?

    how to create a rotateY animation via jQuery and css 3

    How to align buttons properly in css/asp.net?

    How much media queries?

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How to make css max width in IE6 and 7?