CODEWITHSUNDEEP
htmlcsscss-selectors
Manoz
Manoz

Reputation: 6587

How to take nth-child in css?

How to select :nth-child() for all the elements in html except last element.

Is this valid=

  td:nth-child:not(last-child){

    //Some css//
    }

I am using text-overflow:ellipsis property to hide overflow from table in <td> elements.

It got successful with using even,odd children of this <td>. I want this ellipsis effects in all td blocks except last child of table.

I've given it a try-

.table-condensed tbody tr  td:nth-child:not(last-child) a
 {
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
    display: block;
    overflow: hidden;

}

But that's is not a trick obviously. Any suggestions?

Upvotes: 0

Views: 2230

Answers (4)

LRA
LRA

Reputation: 1077

You can override the CSS style of the last child: 

td:last-child a {
   text-overflow: clip;
}

Upvotes: 1

billyonecan
billyonecan

Reputation: 20250

Little bit long-winded, but should do the trick:

tr:not(:last-child) > td, tr:last-child > td:not(:last-child) {
    // styles
}

Here's a fiddle

Upvotes: 4

Jon
Jon

Reputation: 437376

You can simply use td:not(:last-child) as part of your selector, and it will match every cell except the last in each row.

Similar example.

I don't understand at all why you have included a bare :nth-child in your selector -- what are you trying to achieve with that?

Upvotes: 2

BenM
BenM

Reputation: 53198

I think you have an XY problem. You can't directly apply a style to all nth-child elements except the last-child, but you can use two styles:

.table-condensed tbody tr td a {
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
    display: block;
    overflow: hidden;

}

.table-condensed tbody tr  td:last-child a {
    white-space: normal;
    text-overflow: clip;
}

Upvotes: 0

Related Questions