Как выбрать последний элемент с классом?

Question

[nuclear_kote]

<div class="container">
        <div class="product">...</div>
        <div class="product">...</div>
        <div class="product">...</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
    </div>

Как выбрать последний .product?

Answer 1

[nelolka]

$('.container .product:last') в jquery и :last-child в css

Answer 2

[Евгений]

:nth-last-child(1 of .product) {border-bottom: none}

Answer 3

[Mr Crabbz]

В данном случае посредством одного цсс - никак. Если, конечно, кол-во .product заранее не известно.
В проитвном случае можете указать:

.product:nth-child(3)

Если кол-во элементов неизвестно, добавляйте через js класс ему (или пряом в коде, если есть такая возможность)

Answer 4

[DevRev]

.product :last-child

Comments

[Aslan]

Он ведь будет искать у своих дочерних блоков, тут подойдет .container:nth-child(3)

[DevRev]

Aslan: Да, отлично подойдет если блоки будут статичными.

[Ankhena]

DevRev:
1) .product :last-child (с пробелом) найдет свой последний дочерний элемент
2) .product:last-child (без пробела) найдет последний item, потому что last-child ищет последний дочерний элемент своего родителя, а не последний элемент такого же класса

[Ankhena]

Без JS пока не вижу решений

[nuclear_kote]

Ankhena: поскольку в принципе нужно было нижний бордер у последнего элемента убрать, решил по другому, просто .product + .product { border-top:1px; }

[nuclear_kote]

Ankhena: но в целом, да без js похоже никак

[DevRev]

Ankhena: Нужно было просто ссылки на статьи скинуть)

[Ankhena]

nuclear_kote: Ну знаете... Если сразу полностью описывать задачу и цели, то ответ нашелся бы гораздо быстрее.