CODEWITHSUNDEEP
csscss-selectors
barbuslex
barbuslex

Reputation: 340

Combining nth-child(odd) and not() in CSS

I have a problem to combine the following two CSS functions: nth-child(odd) and not(.not-striped)

HTML:

<table class="table-striped">
<tr>
    <th>Header</th>
</tr>
<tr>
    <td>Line 1</td>
</tr>
<tr class="not-striped">
    <td>Hidden line</td>
</tr>
<tr>
    <td>Ligne 2</td>
</tr>
<tr>
    <td>Line 3</td>
</tr>
<tr>
    <td>Line 4</td>
</tr>
</table>

CSS:

.table-striped tbody > tr:nth-child(odd):not(.not-striped) > td,
.table-striped tbody > tr:nth-child(odd):not(.not-striped) > th {
    background-color:#f00;
}

JSFIDDLE: http://jsfiddle.net/barbuslex/9Zck6/1/

JSFIDDLE2: http://jsfiddle.net/barbuslex/4GLMZ/1/

I would like that the not-striped line is the same color as the top line without interrupt the alternating colors on the next lines.

Ex:

My table is dynamic so i can have:

Can you help me ?

Thanks

Upvotes: 2

Views: 1220

Answers (1)

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3491

you can use 2 class .stripped & .not-stripped dont you?

<table class="table-striped">
    <tr class="striped">
        <th>Header</th>
    </tr>
    <tr class="not-striped">
        <td>Line 1</td>
    </tr>
    <tr class="not-striped">
        <td>Hidden line</td>
    </tr>
    <tr class="striped">
        <td>Ligne 2</td>
    </tr>
    <tr class="not-striped">
        <td>Line 3</td>
    </tr>
    <tr class="striped">
        <td>Line 4</td>
    </tr>
</table>

CSS : 

.striped
{
    background-color:#F00
}

.not-striped
{
    background-color:#FFF
}

My Result : enter image description here

JSFiddle : enter link description here

Upvotes: 1

Related Questions