CODEWITHSUNDEEP
csshtml
Banshee
Banshee

Reputation: 15807

Why does CSS not work within the div?

I have the following :

.defaultGrid{
    width:     100%;
}
.defaultGrid table{
    width:      100%;
}
.defaultGrid .pageBCon{
    float:                      right;
}

.defaultGrid .gridTest tr:nth-child(even) {
    background-color: #e9d5b6;
}
<body>
    <div class="defaultGrid, gridTest">
        <div class="pageBCon">Pages</div>
        <table>
            <tbody>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

AS you can see, the HTML elements under the div is not getting correct css? Why?

Upvotes: 1

Views: 67

Answers (4)

user3540944
user3540944

Reputation:

In HTML this not valid

<div class="defaultGrid, gridTest">

but to give a DIV more than one class you should do that:

<div class="defaultGrid gridTest">

Upvotes: 0

Kerry Kobashi
Kerry Kobashi

Reputation: 801

Get rid of the comma. Do not use commas to separate selector classes. It's defaultGrid.gridTest in the css selector.

Upvotes: 0

haim770
haim770

Reputation: 49095

There are 2 problems in your code.

HTML: When you apply multiple classes to an element, you need to separate them using a white-space, not a comma:

<div class="defaultGrid gridTest">

CSS: In your nth-child rule, you have an extra white-space in the rule definition. It should be:

.defaultGrid.gridTest tr:nth-child(even) {
     background-color: #e9d5b6;
}

.defaultGrid .gridTest (with white-space) means grid.test that is a child of .defaultGrid.

See Fiddle

Upvotes: 2

Jenish Rabadiya
Jenish Rabadiya

Reputation: 6766

.defaultGrid{
    width:     100%;
}
.defaultGrid table{
    width:      100%;
}
.defaultGrid .pageBCon{
    float:                      right;
}

.defaultGrid .gridTest tr:nth-child(even) {
    background-color: #e9d5b6;
}
<body>
    <div class="defaultGrid gridTest">
        <div class="pageBCon">Pages</div>
        <table>
            <tbody>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

You just need to remove comma from the class. Instead of <div class="defaultGrid, gridTest"> do <div class="defaultGrid gridTest">

Upvotes: 0

Related Questions