0

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?

4

4 回答 4

4

有点啰嗦，但应该做的伎俩：

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

这是一个小提琴

于 2013-05-02T11:21:33.657 回答
2

您可以简单地将td:not(:last-child)其用作选择器的一部分，它将匹配除每行中的最后一个单元格之外的每个单元格。

类似的例子。

我完全不明白你为什么:nth-child在选择器中包含一个bare——你想用它来实现什么？

于 2013-05-02T11:17:33.920 回答
1

您可以覆盖最后一个孩子的 CSS 样式：

td:last-child a {
   text-overflow: clip;
}
于 2013-05-02T11:12:55.173 回答
0

我认为你有一个XY问题。您不能直接将样式应用于nth-child除 之外的所有元素last-child，但可以使用两种样式：

.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;
}
于 2013-05-02T11:12:42.253 回答