Remove CSS class for Paritcular Html Element

Question

I am new to HTML and CSS.

I have added a CSS class to a table element. Then I added a child table into the parent table. The problem is that the parent tables CSS class also affects the child table. I dont want this to happen.

How can I ensure that the CSS applied to the parent table does not affect the child table?

My Css is as Follows:

.gtable {
    width: 100%;
}
.gtable th {
    padding: 5px 10px;
    text-align: left;
}
.gtableTH {
    text-align: center;
}
.gtable thead tr {
    border: 1px solid #CCCCCC;
    color: #333333;
}
.gtable thead th {
    background: none repeat scroll 0 0 #C0C0C0;
}
.gtable tbody tr:hover td {
    background-color: #FFFAE3;
}
.gtable td {
    padding: 5px 10px;
}
.gtable tbody tr td {
    border-bottom: 1px solid #EEEEEE;
}
.gtable tbody tr:nth-child(2n+1) .gtable thead th {
    background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
}

and my HTML :

<table class="gtable">

                        <thead>

                            <tr>

                                <th>Drop Down Label</th>
                                <th>Drop Down Values</th>
                            </tr>

                        </thead>

                        <tbody class="ui-sortable">

                            <tr>

                                <td>Category 1</td>

                                <td>
                                    <table>
                                        <tbody class="ui-sortable"><tr>
                                            <td>
                                                Complaint
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                                Service Request
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                                Enquiry
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>

                                <td>
                                     <button class="button small" type="submit">Edit</button>
                                </td>

                            </tr>

                        </tbody>
                    </table>

Can you post your html and css code? I am sure you are doing it wrong. — Ashwin
– Ashwin, Commented Oct 25, 2011 at 5:31
Create a selector that matches the child table and overwrite the parent rules. — Russell Dias
– Russell Dias, Commented Oct 25, 2011 at 5:34
You need to post your code, in order for us to be able to help you — Darko
– Darko, Commented Oct 25, 2011 at 5:38

Abhinav Pandey · Accepted Answer · 2011-10-25 05:55:41Z

Use immediate child selector > This means the CSS properties will be applied to only direct descendants of the selector on left side.

e.g.

.box1 > img  {
     border:5px;
}

only <img> tags directly inside of .box1 will have a border of 5px. If they are inside any other element, lets say <a><img src=... /></a> they will not have any border

use this CSS for your example :

    .gtable {
        width: 100%;
    }
    .gtable > th {
        padding: 5px 10px;
        text-align: left;
    }
    .gtableTH {
        text-align: center;
    }
    .gtable > thead > tr {
        border: 1px solid #CCCCCC;
        color: #333333;
    }
    .gtable > thead > th {
        background: none repeat scroll 0 0 #C0C0C0;
    }
    .gtable > tbody > tr:hover > td {
        background-color: #FFFAE3;
    }
    .gtable > td {
        padding: 5px 10px;
    }
    .gtable > tbody > tr > td {
        border-bottom: 1px solid #EEEEEE;
    }
    .gtable > tbody > tr:nth-child(2n+1) >.gtable > thead > th {
        background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
    }

Red Orca · Accepted Answer · 2011-10-25 05:57:54Z

2

EDIT: from the code you just posted, it looks like the problem is that .gtable td (and other selectors with spaces in them) select a td anywhere inside an element with the gtable class (which includes the child table). If you only want to select elements within the first table, either put classes directly on those elements, or use a child selector, like .gtable > tbody > tr > td.

edited Oct 25, 2011 at 5:57

answered Oct 25, 2011 at 5:52

Red Orca

4,7951 gold badge18 silver badges12 bronze badges

Comments

albert · Accepted Answer · 2011-10-25 05:45:18Z

1

no clue without your code, but here's a demo of two tables with nested tables. one has the styles turned off: http://jsfiddle.net/jalbertbowdenii/7QWQv/

answered Oct 25, 2011 at 5:45

albert

8,1013 gold badges49 silver badges64 bronze badges

Comments

Ashwin · Accepted Answer · 2011-10-25 05:57:02Z

1

In your Css you are using .gtable tbody, .gtable tr, .gtable td, .gtable th which means you are applying css to all the childs (tr, td, th) inside your parent table. You should be avoiding it.

Solution:
Apply another class to the child table like <table class="childtable"> and in you css you will need to define css for the nested elements as -
.childtable tbody, .childtable tr, .childtable td, .childtable th etc.

answered Oct 25, 2011 at 5:57

Ashwin

12.5k22 gold badges87 silver badges119 bronze badges

Collectives™ on Stack Overflow

Remove CSS class for Paritcular Html Element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related