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 get the height of a div with overflow:auto property set in css

    How to revert back to Desktop website from Mobile Website when using CSS Media Queries?

    How to make css width work in firefox

    How do I handle modal dialog fadeout in jQuery UI?

    How to capitalize first letter with JSTL/CSS?

    How to make this Header/Content/Footer layout using CSS?

    How do I go from fixed width to percentage width in a CSS stylesheet?

    How to get a heading to scale with a image and keep spacing ratio html/css

    CSS floats - how do I keep them on one line?

    How can i set png icon collection with CSS?

    How to get the root directory of wordpress in css

    CSS DIV as table - how to make all column same height as the highest

    CSS: How to float:right and center

    how to build a triangular slider? [closed]

    How to measure the amount of time an animation took place using JavaScript

    CSS: How do I make a !100% header with a repeat-x background and tip

    How do I position images left and right in wordpress post

    How can I edit CSS on an HTML tab?

    How to expand input field to 100% of the parent

    How to serve different size SVG graphic in css background image?

    How do I stop css pushing
  • to the right?
  • How to use Open Sans font with cakePhp 3?

    How to do multiple class selectors in Stylus CSS pre-processor

    How to get CSS property value from HTML using generalistic JavaScript function
    When you use window.getComputedStyle the method directly return the style attribute calculated of your object. you can access directly the css attribute in the rreturn object. So to solve your...
    Read more

    Need help understanding how to format inline CSS of Table data from a JS file

    How do I fix the image size when changing to another image?

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    How to get the CSS style from Inspect Element

    How to align TH Header with TD in TBody

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?