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

Выбрать последний элемент таблицы первого уровня CSS / Jquery

Нужно обратиться к последнему дочернему элементу table первого уровня, т.е. к последнему div первого уровня (черного цвета), внутренние блоки серого цвета не должны меняться. Количество дочерних блоков с под-блоками может меняться. Пробовал добавить класс последнему элементу с помощью jquery, не выходит, выбираются все последние серые дочки, то же самое и с CSS. Пробовал другие разные вариации и манипуляции с last-child, но нужного результата так и не смог получить. Помогите решить задачу

$('#table div:last-child').addClass('test');

* < margin: 0; padding: 0; >#table > div < display: block; box-sizing: border-box; background: #000; width: 50%; padding: 5px; margin-bottom:5px ; >#table > div > div < display: block; box-sizing: border-box; background: #555; height: 50px; margin: 5px; >/* #table div:last-child< background: green; >*/ /*.test < background: green!important; >*/

Отслеживать
задан 20 авг 2017 в 18:04
37 7 7 бронзовых знаков
почитайте про «>» в названиях стилей
20 авг 2017 в 18:05

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нужно добавить > для непосредственных потомков

$('#table > div:last-child').addClass('test'); 

Без > скрипт добавлял класс для всех последних div внутри #table

Отслеживать
ответ дан 20 авг 2017 в 18:09
1,477 7 7 серебряных знаков 14 14 бронзовых знаков
Пробовал, красится последний серый под-блок, а нужно последний черный.
20 авг 2017 в 18:23
@Евгений, вроде работает как надо jsfiddle.net/monobit/syy32f0t/1
20 авг 2017 в 18:27
работает, спасибо!
20 авг 2017 в 18:40

• jquery
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Псевдокласс last-child. Как выбрать последний элемент в контейнере с помощью CSS.

В прошлой заметке мы научились выбирать первый элемент в родительском элементе с помощью селектора first-child. Дайте теперь научимся выбирать последний элемент в родительском блоке.

Это можно сделать с помощью селектора, который тоже является псевдоклассом и называется last-child.

Синтаксис здесь аналогичный:

Для примера, давайте возьмем тот же самый код, что и в предыдущей заметке:

Псевдокласс last-child — выбирает последний, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.

Псевдокласс :nth-last-child

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.

Синтаксис

Значения

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

:nth-last-child() и :nth-last-of-type()

Псевдоклассы :nth-child() и :nth-of-type() выбирают заданные элементы из группы братских элементов, начиная с первого. В противоположность им, псевдоклассы :nth-last-child() и :nth-last-of-type() выбирают элементы, считая от последнего.

Приведём несколько примеров.

Выбирает последний элемент, аналогичен :last-child.

Выбирает предпоследний элемент.

Последние два элемента.

Все элементы, кроме последних двух.

Все чётные элементы, начиная с конца. :nth-last-child(even) идентичен :nth-child(even) только при нечётном общем числе элементов (пять, к примеру); если общее число элементов чётное (шесть, к примеру), то :nth-last-child(even) идентичен :nth-child(odd) .

Все нечётные элементы, начиная с конца.

Псевдокласс h2:last-child(1) выбирает последний элемент из группы, затем проверяет, какой это элемент. Если это , то он будет выбран, в противном случае элемент выбран не будет. В качестве примера рассмотрим следующую структуру элементов.

Здесь псевдокласс без указания селектора :last-child(1) выберет последний элемент —

Второй абзац

. p:last-child(1) выберет этот же абзац, потому что он одновременно последний и это элемент

. h2:last-child(1) не выберет ничего, поскольку не совпадают два условия одновременно: последний элемент и элемент

. При этом h2:last-child(2) выберет

Второй заголовок

, здесь уже условия совпадают: элемент

и предпоследний элемент.

Псевдокласс :nth-of-type() работает схожим образом, но выбирает элементы только указанного типа. Так, запись h2:nth-last-type(1) означает выбрать последний элемент

. Наличие элементов другого типа (

) при этом игнорируется. Для HTML, приведённого выше, h2:nth-last-type(1 ) выберет строку

Второй заголовок

, поскольку это последний элемент

внутри .

В примере 1 с помощью :nth-last-of-type прячется последний абзац через свойство display со значением none . При получении кнопкой фокуса (для этого достаточно щёлкнуть по кнопке), все абзацы ниже кнопки становятся видны. При потере кнопкой фокуса (щелчок по любому месту за пределами кнопки) абзацы снова скрываются.

Пример 1. Использование :nth-last-of-type

p p:nth-last-of-type(1)

Жизненные советы

Если вас третий день подряд клонит в сон — значит, сегодня среда.

Ещё совет

Нет такого совета, который нельзя было бы дать.

Результат данного примера показан на рис. 1.

Рис. 1. Скрытый последний абзац

Вместо p:nth-last-of-type(1) можно использовать p:last-of-type для выбора последнего абзаца или p:nth-of-type(n+1) для выбора всех абзацев, кроме первого.

Псевдоклассы nth-child и nth-last-child

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в родительском элементе. В значении может быть указан как порядковый номер элемента:

Так и выражение, которое задается в виде an+b , где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.

:nth-child(3n+2) или :nth-child(-n+3)

Также доступны значении odd и even , которые определяют четные и нечетные элементы.

Псевдокласс :nth-last-child делает все тоже самое, только с конца списка элементов.

Похожие публикации:

1. Core web vitals что это
2. Wise что это за программа
3. Dart sdk как работать с программой
4. Bat и cmd в чем отличие

CSS: последний тип не работает в сочетании с: не

У меня есть что-то, что ведет себя так же, как предоставленный фрагмент. У меня есть список элементов, когда при выборе одного из них я хочу, чтобы он отображался в верхней части списка, что я могу легко сделать с помощью упорядочения по гибкому порядку. За один раз можно выбрать только один. Но поскольку каждый элемент списка имеет границы, последний элемент не должен иметь границы. Простое использование li:last-of-type отлично работает в большинстве случаев, за исключением тех случаев, когда выбран последний элемент списка. Я пробовал несколько селекторов, которые должны выбрать последний элемент списка в неупорядоченном списке, который не имеет данного класса, но селектор last-of-type , похоже, не ведет себя правильно. В случае, если в коде не ясно, селектор, к которому я обращаюсь, равен .selection li:not(.selected):last-of-type . И проблема заключается в двойной границе внизу списка. Это должна быть единая граница, исходящая из неупорядоченного элемента списка.

.selection ul < display: flex; flex-direction: column; border: .15rem solid #666; >.selection li < order: 2; border-bottom: .15rem dashed #666; >.selection li.selected < order: 1; >/** This selector should work in my mind, but it doesn't **/ .selection li:not(.selected):last-of-type < border-bottom: none; >/** Non-important styles to put it into context **/ ul < list-style: none; padding: 0; width: 25%; margin: 2rem auto; >li < padding: 1rem 2rem; background-color: #ebebeb; >li:hover < background-color: #ccc; >a

Я также создал этот фрагмент кода., чтобы продемонстрировать проблему. У меня такое чувство, что это проблема с селектором :last-of-type , и, возможно, я использую его неправильно, но, на мой взгляд, вышеприведенный селектор должен работать. Любая помощь или понимание того, как это исправить, или другой способ выбора элемента, или понимание того, почему это не сработало, будут оценены.

Pavlin 17 фев. 2016, в 17:38

Применение псевдоклассов в CSS для выборки элементов

Третье поколение CSS принесло в вёрстку такое понятие, как псеводклассы. Сегодня речь пойдет о first-child, last-child и nth-child. С помощью них можно легко переоформить первый или последний элемент списка, изменить цвет второй строки таблицы или выделить первые пять ячеек таблицы. И всё это без использования javascript.

• «first-child» — выбирает первый элемент родителя;
• «last-child» — указывает на последний элемент родителя;
• «nth-child» — выбирает элементы исходя по параметру с начала;
• «nth-last-child» — то же самое, но начиная с конца.

С помощью «first-child» и «last-child» можно выбрать и переоформить первый или последний элемент родителя. Посмотрим как это выглядит на примере. Для этого применим стили к ячейкам таблицы с идентификатором «primer» (id=»primer»).

 #primer tr:first-child td < background-color:red; >#primer tr:last-child td

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

Псевдолкасс «nth-child» предоставляет более интересные возможности. Он позволяет применить стиль к элементам в зависимости от их порядкового номера в дереве DOM. Псевдокласс может принимать параметры:

• «odd» — выбрать нечетные элементы;
• «even» — выбрать четные элементы;
• число — выбрать элемент с определенным порядковым номером;
• выражение вида an+b.

Примеры использования nth-child()

Начинаем разбираться. Применим к таблице стиль для задания фона чётным и нечетным строкам:

 #primer tr:nth-child(odd) td < background-color:red; >#primer tr:nth-child(even) td

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

Если в качестве параметра к nth-child() указать число, то можно выделить элементы по их порядковому номеру внутри родительского:

 #primer td:nth-child(2) < background-color:red; >#primer td:nth-child(3)

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

В качестве параметра можно задавать выражения вида «an+b», где «a» и «b» целые числа, а «n» — переменная, которая последовательно изменяется от 0 до количества элементов селектора. Рассмотрим пример выделения красным цветом только первых двух строк и каждого четвертого столбца.

 #primer tr:nth-child(-n+2) td < background-color:red; >#primer td:nth-child(4n+4)

1.1	1.2	1.3	1.4	1.5	1.6	1.7	1.8
2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8
3.1	3.2	3.3	3.4	3.5	3.6	3.7	3.8
4.1	4.2	4.3	4.4	4.5	4.6	4.7	4.8
5.1	5.2	5.3	5.4	5.5	5.6	5.7	5.8

Выбора только первых трёх элементов списка:

li:nth-child(-n+3)

Выбора последних трёх элементов списка:

li:nth-child(n+3)

Выбора каждого третьего элемента списка:

li:nth-child(3n+1)

Псевдокласс nth-last-child()

Осталось разобрать псевдокласс «nth-last-child» . Его отличие от «nth-child» в том, что весь отсчёт идёт от конца селектора. Примером может служить ситуация, когда требуется выделить ячейку таблицы «ИТОГО». Как правило, это последняя ячейка последней строки:

 #primer tr:nth-child(1) td:nth-child(1) #primer tr:nth-last-child(1) td:nth-last-child(1)

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

Псевдоклассы CSS могут применяться к любым элементам html документа.