如何选择css中的最后一个div

时间:2013-12-28 16:04:44

标签: css css-selectors

我有这个HTML代码:

<div id="mydiv">
    [other divs]
    <div data-day="1">content</div>
    [other divs with data-day attribute]
    <div data-day="random">content</div>
    [other divs]
</div>

我想选择具有data-day属性的mydiv中的最后一个元素。我怎么能这样做?

#mydiv div[data-day]:last-child

我尝试了这个,但它没有用。

2 个答案:

答案 0 :(得分:0)

您的问题没有真正的 css-only解决方案。使用Javascript你可以做到这一点,我想。

  • last-child不起作用,因为它仅适用于其父级的最后一个元素 在您的情况下:仅当它是最后一个元素,后面没有其他元素。
  • last-of-type不起作用,因为它只选择 types ,而不是属性或类。

解决方法:

使用手工具有某个属性的最后一个元素添加一个类:

<div id="mydiv">
    <div></div>
    <div data-day="1">content</div>
    <div></div>
    <div data-day="random" class="last-data-day">content</div>
    <div></div>
</div>

答案 1 :(得分:0)

我做了一个快速的谷歌搜索,发现以下链接很有用:

CSS Tricks

Stack Overflow (User with same issue)

答案是:

:last-child仅在有问题的元素是容器的最后一个子元素时才有效,而不是特定类型元素的最后一个元素。为此,您需要:last-of-type

http://jsfiddle.net/C23g6/3/