last child css не работает
На чтение 4 мин. Просмотров 2 Опубликовано
Есть куча блоков в .main , надо применить стиль к последнему .one Но блок .two мешает этому
JS использовать не хочется, контент динамический и это будет создавать проблемы
2 ответа 2
Можно все Ваши «one» заключить еще в 1 див с идентификатором, а потом конкретно уже сделать
Вариант 1
Если блок .two всегда есть и он один, воспользуйтесь :nth-last-child(2)
Вариант 2
Подсказано пользователем @Mik. С учетом тонкостей работы псевдокласса :last-of-type можно изменить верстку так, чтобы .two были другими тегами (например
) или уже можно воспользоваться произвольными тегами (например , при этом обязательно указать в css свойство display ) Гугл и Яндекс уже применяют и не стесняются.
Почему не срабатывает :last-child ?
Каждому элементу кроме последнего нужен border-bottom . При добавлении last-child бордер почему-то удаляется у всех элементов.
UPD
В данном случае стили ссылок не влияют на отображение. Им задан свой стиль text-decoration: none;
UPD 1.0
Всем дивам с классом .user-name задан стиль — border-bottom: 1px solid #e2e2e2; .
Суть вопроса — у последнего дива с классом .user-name убрать border-bottom
PS: Все дивы с классом .user-name находятся внутри дива с классом .group-list .
UPD 1.1
При добавлении стиля border-bottom я использую только дивы с классом .user-name что находится внутри них, не имеет значения (к ним не привязываемся).
Для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента PSD макета.
Дизайнеры очень любят разделять пункты меню разными символами, ставя в тупик неопытных верстальщиков. Начинающий верстальщик, наверняка попался бы на удочку и вслед за текстом, понатыкал бы разделители.
В результате мы увидели бы следующую разметку в HTML-документе, как на картинке ниже.
Такой нехитрый способ конечно же работает, но он сильно засоряет код, а практической пользы для семантики от кучи span-ов, никакой нет.
Правильный способ
В HTML коде не нужно вообще, как-то проставлять вертикальные линии. Теперь, мы считаем их псевдоэлементами, а все дальнейшие действия происходить будут в CSS стилях.
Псевдоэлемент after в CSS стилях
Мы видим определенную закономерность, что за каждым пунктом меню, стоит разделитель, значит применяться
Символ вертикальная линия имеет следующий код — «
Почему не срабатывает :first-child? — Хабр Q&A
Почитав здесь вопрос и ответы, я понял свою ошибку. Хочу поделиться 🙂У нас есть меню
<div>
<div>
<ul>
<li><a href="#">Вызов курьера</a></li>
<li><a href="#">Сотрудничество</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Видеоблог</a></li>
</ul>
</div>
</div>И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.
Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:
.top-line .menu ul li {
float: left;
padding: 6px 0px;
}
.top-line .menu ul li a {
color: #474747;
font-size: 0.857em;
text-decoration: none;
padding: 7px 15px;
border-left: 1px solid #fff;
border-right: 1px solid #c7c7c7;
}
.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; } Потом начал отменять бордеры у первого и последнего элемента
.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.
На утро дошло 😀
У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!
Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.
И все заработало 🙂
Полный правильный код ниже:
<div> <div> <ul> <li><a href="#">Вызов курьера</a></li> <li><a href="#">Сотрудничество</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Видеоблог</a></li> </ul> </div> </div>
.top-line .menu ul li {
float: left;
padding: 6px 0px;
border-left: 1px solid #fff;
border-right: 1px solid #c7c7c7;
}
.top-line .menu ul li a {
color: #474747;
font-size: 0.857em;
text-decoration: none;
padding: 7px 15px;
}
.top-line .menu ul li:first-child { border-left: none; }
.top-line .menu ul li:last-child { border-right: none; }CSS: селектор last-child не работает
Я использую: last-child селектор, но он не работает. Пример:
.last {background:blue;border-bottom:1px solid #cccccc;}
.last:last-child {background:red;border-bottom:0px solid #cccccc;}
пример jsfiddle
Спасибо каждому за ответ.
Но у меня есть другой вопрос. jsfiddle Пример 2
.big_box {
background:#eeeeee;
height:500px;
}
.last {
width:90%;
margin:auto;
background: yellow;
border-bottom: 1px solid #cccccc;
}
.last:last-child {
background: red;
border-bottom: 0px solid #cccccc;
}<div>
<div>the other paragraph.</div>
<div>The first paragraph.</div>
<div>The second paragraph.</div>
<div>The third paragraph.</div>
<div>The fourth paragraph.</div>
<div>the other paragraph.</div>
<div>the other paragraph.</div>
<div>the other paragraph.</div>
</div> Поделиться Источник user1821062
3 Ответа
4
То, что вам нужно сделать, это использовать элемент обертки. Проверьте это, когда вы используете один.
JSFiddle
<div>
<div>The first paragraph.</div>
<div>The second paragraph.</div>
<div>The third paragraph.</div>
<div>The fourth paragraph.</div>
</div>
.last {
background: yellow;
border-bottom: 1px solid #cccccc;
}
.last:last-child {
background: red;
border-bottom: 0px solid #cccccc;
}
Поделиться jhpratt 02 августа 2017 в 03:47
3
Ответ на Q1: (перед обновлением вашего поста )
<div>The fourth paragraph.</div>— это один перед последним no last, потому что в Fiddle ваш код похож (используйте инструменты разработки):
<body>
<div>The first paragraph.</div>
<div>The second paragraph.</div>
<div>The third paragraph.</div>
<div>The fourth paragraph.</div>
<script>...</script>
</body>
Итак, последний ребенок-это <script> no <div>The fourth paragraph.</div> .
для исправления я использую:
.last:nth-last-child(2) {
background: red;
border-bottom: 0px solid #cccccc;
}
Демонстрация
кроме того, вы можете использовать div:last-of-type :
Демонстрация
Спасибо @Michael_B.
Ответ на Q2: (после обновления вашего поста ):
вы должны использовать .last:nth-child(5) { :
Демонстрация
Поделиться Ehsan 02 августа 2017 в 03:47
0
вы должны попробовать это
.last{
background:yellow;
border-bottom:0px solid #cccccc;
}
.last div:last-child{
background:red;
border-bottom:1px solid #cccccc;
}<div>
<div>The first paragraph.</div>
<div>The second paragraph.</div>
<div>The third paragraph.</div>
<div>The fourth paragraph.</div>
</div>Поделиться Twinkle 02 августа 2017 в 04:07
:last vs: селектор last-child
Я заметил, что $( ‘filter:last’ ) отличается от $( ‘filter:last-child’ ) в jQuery. Я попробовал документы jQuery, но мне было трудно понять, какую дополнительную цель выполняет :last и почему они…
:селектор last-child работает на некоторых страницах, но не на других
Я хочу, чтобы все, кроме последнего из серии сообщений на странице WordPress, имели простые разделители между ними, которые я реализовал с помощью нижней границы. Я использовал last-child, чтобы…
Сложный селектор не работает в последней версии blink: nth-child(2): nth-last-child(2){}
есть странная проблема: после мигания селектор обновления .groups .group:nth-child(2):nth-last-child(2){} просто перестает работать. Но он по-прежнему хорошо работает в webkit и gecko. Есть идеи,…
CSS селектор form:last-child не работает
Похоже, что псевдокласс CSS :last-child не работает с элементами формы,но :first-child работает. form:first-child { border: 1px solid blue; } form:last-child { border: 1px solid red; } <body>…
Является ли селектор: last-child плохим для производительности?
CSS first-child и last-child не работают при использовании одного и того же элемента
Я просто заметил, что CSS :first-child и :last-child не работают при использовании одного и того же элемента. Используется только один. Мне интересно, почему это так, и если есть какой-либо обходной…
nth-last-child селектор не работает
У меня есть это html: <div class=leading-4> <h3>title</h3> <p>one para</p> <p>Maybe another para</p>…
CSS селектор first-child не работает
Я попытался использовать :nth-child(n), который также не работает, я использую этот селектор на неправильных элементах? на элементе div со следующим классом, block_photo. .block_photo:first-child,…
Почему селектор CSS section:only-child не работает?
Я просто возился с новыми тегами HTML5 и псевдо-селекторами и заметил, что селектор section:only-child, похоже, не работает. Я тестирую это на последней версии Chrome (23.0). Мой код: <section…
Множественный nth-last-child работает не так, как ожидалось. Почему?
У меня есть следующие HTML: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>…
Css last-child не работает при добавлении divs разных классов
Поскольку вы уже пытались использовать селектор CSS3, тогда это правильный псевдокласс для использования
.MyClass:last-of-type
В соответствии с спецификацией CSS3 (по крайней мере, насколько я понимаю) это должно работать, но похоже, что нет. По крайней мере, не в последних версиях браузера Chrome (v23) и Firefox (v17).
ПРЕДУПРЕЖДЕНИЕ: Верхняя информация не работает и может вводить в заблуждение, что есть чистое решение CSS для этой проблемы… Потому что с CSS3 там нет. CSS4, с другой стороны, будет иметь дополнительный псевдокласс
:nth-last-match(n), который, вероятно, будет охватывать этот точный сценарий. Но слишком рано говорить, когда не все селектора CSS3 были реализованы браузерами.
Дополнительное исследование
Здесь JSFiddle, который показывает, как работает этот селектор псевдоселементов:
- получить все элементы, которые удовлетворяют CSS-селектору (без псевдо)
- получить разные типы элементов HTML (теги)
- выберите все элементы sibling того же типа (тег) для каждой группы типов (тегов)
- Уменьшить группу типов (тегов) до последнего элемента в группе
- Остается ли этот оставшийся элемент (каждой группы) селектором (без псевдо)?
- Если true, тогда примените стиль, иначе
Это означает (как показывает мой пример), что несколько элементов сиблинга могут удовлетворять этому селектору, если они имеют разный тип.
Это похоже на работу в Chrome и Firefox. И если мы внимательно прочитаем спецификацию, она скажет
Псевдокласс класса
:last-of-typeпредставляет элемент, который является последним родством его типа в списке дочерних элементов его родительского элемента.
Если бы он сказал, что это последний брат, который удовлетворил селектор, тогда мое верхнее решение будет работать. Поэтому давайте проверим мои шаги.
Запустите шаги с помощью HTML
- получает первые 3 элемента
- только один тип:
div - четыре элемента (включая последний)
- уменьшить до последнего
- удовлетворяет? Нет
- не устанавливать стиль
Другая пара примеров в моей скрипке
Просто, чтобы проверить это поведение селектора псевдо-класса, я добавил два дополнительных примера. Здесь HTML:
<!-- First --> <div> <div>Content</div> <div>Content</div> <p>Content</p> <p>Content</p> </div> <!-- Second --> <div> <div>Content</div> <div>Content</div> <div>Content</div> <p>Content</p> </div>
В первом из двух элементов удовлетворяют селектор (последний div и последний p). Во втором один элемент удовлетворяет селектору (последний div)
Результат
Предоставляя HTML, который вы предоставили, и предполагая, что может быть произвольное количество элементов с .MyClass, нет способа написать общий селектор в CSS3, который фактически нацелил бы последний элемент с определенным классом CSS.
Лучший способ — добавить дополнительный класс к элементам, которые представляют последний с определенным классом, и написать селектор для таргетинга на него.
CSS селектор form:last-child не работает
Похоже, что псевдокласс CSS :last-child не работает с элементами формы,но :first-child работает.
form:first-child {
border: 1px solid blue;
}
form:last-child {
border: 1px solid red;
}<body>
<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>
</body>JSFiddle
Я заинтересован только в стилизации самого элемента формы, и я только проверил это в Chrome. Первая форма получает синий фон, а вторая не получает фона. Инспектор Chrome также не показывает :last-child , примененный ко второй форме. Итак, как выбрать последнюю форму с помощью CSS?
Поделиться Источник Matt S 27 ноября 2017 в 14:23
4 Ответов
3
Это отлично работает, когда вы создаете правильный файл HTML, причина, по которой он не работает в вашем fiddle, заключается в том, что некоторые онлайн-инструменты добавляют некоторые скрипты непосредственно перед закрывающими тегами элемента body, поэтому форма, которую вы ожидаете иметь стиль, на самом деле не является последним дочерним элементом тела.
Чтобы увидеть, как он работает на вашем fiddle, просто оберните формы в контейнер div, и вы должны увидеть его, как ожидалось:
<body>
<div>
<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>
</div>
</body>
вы можете обратиться к этому вопросу для получения дополнительной информации.
Поделиться randomguy04 27 ноября 2017 в 14:38
2
Вопрос:
— У вас есть другие братья и сестры, такие как scripts ниже form , так что это будет last-child
Решения (ы)
Используйте ( first ) / last-of-type вместо этого, так как это безопаснее, потому что вы хотите только нацелить form s
Псевдокласс
:last-of-typeCSS представляет последний элемент своего класса. тип среди группы родственных элементов.
form:first-of-type {
border: 1px solid blue;
}
form:last-of-type {
border: 1px solid red;
}<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>Если вы хотите использовать ( first )/ last-child , то вам нужно добавить родителя в селектор и HTML (в случае, если у вас нет)
Псевдокласс
:last-childCSS представляет последний элемент среди a группа родственных элементов
section form:first-child {
border: 1px solid blue;
}
section form:last-child {
border: 1px solid red;
}<section>
<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>
</section>Поделиться dippas 27 ноября 2017 в 14:29
2
Для того, чтобы использовать first-child и last-child вам нужно обратиться к их ‘parent’, как в примере ниже.
.container form:first-child {
border: 1px solid blue;
}
.container form:last-child {
border: 1px solid red;
}<div>
<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>
</div>Вы можете прочитать больше об этих псевдо-селекторах в этой теме
Поделиться Kristijan Iliev 27 ноября 2017 в 14:33
-1
Ваша вторая форма-не последний ребенок своего родителя. последний ребенок- script (jsfiddle добавил этот тег.), так что вы можете использовать:
form:nth-child(2)
// or
form + form
// or
form:last-of-type
// or
form:nth-last-child(2)
Поделиться DigitCart 27 ноября 2017 в 14:49
CSS селектор first-child не работает
Я попытался использовать :nth-child(n), который также не работает, я использую этот селектор на неправильных элементах? на элементе div со следующим классом, block_photo. .block_photo:first-child,…
Почему селектор CSS section:only-child не работает?
Я просто возился с новыми тегами HTML5 и псевдо-селекторами и заметил, что селектор section:only-child, похоже, не работает. Я тестирую это на последней версии Chrome (23.0). Мой код: <section…
Почему этот селектор CSS :first-child не работает?
Я работаю над проектом Asp.Net MVC 3 и столкнулся с кирпичной стеной о том, почему это не работает так, как я думаю, что это должно быть. Мой markup-это: <fieldset> <input type=hidden…
CSS: селектор last-child не работает
Я использую: last-child селектор, но он не работает. Пример: .last {background:blue;border-bottom:1px solid #cccccc;} .last:last-child {background:red;border-bottom:0px solid #cccccc;} пример…
Почему селектор h4:nth-child (1): contains(‘a’) не работает?
Я проверяю этот селектор: h4:nth-child(1):contains(‘a’) селектор не работает? Я проверяю это в firefinder и ничего не возвращает (не информация о том, что есть нулевые элементы) Тогда проверьте это:…
Transform:scale и :nth-child() селектор не работает
Я сейчас учусь HTML5 / CSS / jQuery. Я хотел сделать простые эскизы статей с анимацией на основе CSS. Я использую CodePen, чтобы легко поделиться этими мелочами. К сожалению, я узнал несколько…
Почему селектор css nth-child не работает должным образом?
Согласно этой статье: http://css-tricks.com/how-nth-child-works / селектор nth-child должен работать по-другому. В моем случае я должен использовать .drag_box:nth-child(3n+2){} , чтобы выбрать…
:селектор last-child работает на некоторых страницах, но не на других
Я хочу, чтобы все, кроме последнего из серии сообщений на странице WordPress, имели простые разделители между ними, которые я реализовал с помощью нижней границы. Я использовал last-child, чтобы…
Почему селектор nth-child не работает в css?
Я использую селектор nth-child , чтобы добавить цвет границы для разных социальных list-group-item . Что я делаю не так? .list-group-item:nth-child(1) { border-right: 3px solid yellow; }…
Сложный селектор не работает в последней версии blink: nth-child(2): nth-last-child(2){}
есть странная проблема: после мигания селектор обновления .groups .group:nth-child(2):nth-last-child(2){} просто перестает работать. Но он по-прежнему хорошо работает в webkit и gecko. Есть идеи,…
CSS first-child и last-child не работают при использовании одного и того же элемента
Я просто заметил, что CSS :first-child и :last-child не работают при использовании одного и того же элемента. Используется только один. Мне интересно, почему это так, и если есть какой-либо обходной путь к этому в CSS? Мне кажется, что ошибка CSS — первый элемент может быть также последним элементом.
Я не мог найти ничего в Google на эту тему. Каждый учебник предполагает, что будет по крайней мере 2 элемента.
Я ищу что-то вроде: «first child is also last child» селектор. Существует ли она?
html css css3 css-selectorsПоделиться Источник Atadj 23 августа 2012 в 14:21
2 Ответа
33
Мне интересно, почему это так, и если есть какой-либо обходной путь к этому в CSS? Мне кажется, что ошибка CSS — первый элемент может быть также последним элементом.
Это не ошибка. Вот как работает каскад: если элемент является как первым дочерним, так и последним дочерним элементом, то если у вас есть :first-child и :last-child в отдельных правилах, и они оба соответствуют одному и тому же элементу, то что-либо в более позднем объявленном или более конкретном правиле переопределит другое.
Вы можете найти пример такого поведения здесь, со свойством border-radius shorthand и обходными путями, которые включают использование свойств компонента вместо стенографии, а также указание отдельного правила в целом с использованием одного из следующих селекторов…
Я ищу что-то вроде: «first child is also last child» селектор. Существует ли она?
Буквально, Вы бы цепочку оба псевдокласса, как это, который отлично работает:
:first-child:last-child
Однако существует специальный псевдокласс, который действует таким же образом:
:only-child
Основное различие (по сути, единственное различие) между этими двумя селекторами-специфичность: первый более специфичен, поскольку содержит один дополнительный псевдокласс. Нет никакой разницы даже в поддержке браузера, поскольку :last-child и :only-child поддерживаются точно такими же версиями каждого браузера.
Поделиться BoltClock 23 августа 2012 в 14:22
2
Я понимаю, что сильно опаздываю на это ,но вы также можете использовать CSS :first-of-type и :last-of-type. Например:
<blockquote>
<p>Some text you want to quote</p>
</blockquote>
Этот CSS будет добавить котировки в пункте:
blockquote{
quotes: "“" "”" "‘" "’";
}
blockquote p:first-of-type:before{
content:open-quote;
}
blockquote p:last-of-type:after{
content:close-quote;
}
Поделиться fstorr 26 марта 2016 в 01:23
Как именно last-child/first-child работает?
У меня есть вопрос, как работают первый ребенок и последний ребенок с элементами и классами? Посмотрите на мой пример И по этому поводу у меня есть несколько вопросов: Почему это правило не…
:last-child работает,: first-child нет
У меня есть aside с двумя <div class=sku> элементами. Я пытаюсь использовать CSS, чтобы манипулировать :first-child , но это не работает. Однако при попытке доступа к :last-child это…
Как исключить класс при использовании селекторов :first-child и: last-child в jQuery
У меня есть проблема jQuery, которую я не могу решить самостоятельно — хотя я знаю, как стилизовать первый и последний элементы неупорядоченного использования селекторов :first-child и: last-child,…
Возьмите last-child вместо first-child в единственной строке таблицы
У меня есть следующие CSS: table tbody tr:last-child td { padding-top: 7px; border-bottom: 0; } table tbody tr:first-child td { padding-top: 6px; } Теперь у меня может быть таблица только с одной…
селекторы last-child и first-child не работают
Я строю навбар. Вот чего я хочу; измените background-color на ссылке, когда Гувер над ним. первый и последний фон ссылки должны иметь круглые углы. Проблема в том, что либо все ссылки получают…
Google Chrome и nth-last-child
Следующий CSS работает в браузере Firefox, IE9 и Gnome Web. li.col:nth-child(3n+1):nth-last-child(2), li.col:nth-child(3n+1):nth-last-child(2) + li {width: 47.5%;} Первая строка должна выбрать…
селекторы nth-child или first/last-child не работают. Как правильно их применять?
У меня есть структура: <div id=div> <ul class=ul> <li class=li_one> </li> <li class=li_two> </li> </ul> </div> Я хочу установить background:red на…
Как удалить класс first-child и last-child из <li> в wordpress?
<div class=containerPersonal> <ul> <li class=dropdownPersonal first-child><a href=# data-toggle=dropdownPersonal>Home<i class=iconArrow></i></a></li>…
Clearfix ломает: last-child
Это странно, но когда я использую: last-child для своих элементов, а затем ставлю clearfix div В конце, он ломает last-child? Есть идеи у кого-нибудь? HTML: <div> <a href=#>first…
Является ли селектор: last-child плохим для производительности?
Я использую селектор :last-child много раз, в основном при использовании border-bottom в списке, где я использую border: none; для последнего ребенка,или при использовании полей. Итак, мой вопрос:…
css last-child не работает при добавлении div разных классов
Так как вы уже пробовали использовать селекторы CSS3, это правильный псевдокласс для использования
.MyClass:last-of-type
Согласно спецификации CSS3 (по крайней мере, насколько я понимаю) это должно работать, но, похоже, это не так. По крайней мере, не в последних версиях браузера Chrome (v23) и Firefox (v17).
ВНИМАНИЕ: Верхняя информация не работает и может вводить в заблуждение, что есть чисто CSS-решение этой проблемы … Потому что в CSS3 ее нет. CSS4, с другой стороны, будет иметь дополнительный псевдокласс
:nth-last-match(n), который, вероятно, будет охватывать именно этот сценарий. Но пока рано говорить, когда не все селекторы CSS3 были реализованы браузерами.
Дополнительное расследование
Вот JSFiddle, который показывает, как на самом деле работает этот селектор псевдокласса:
- получить все элементы, которые удовлетворяют селектору CSS (без псевдо)
- получить их различные типы элементов HTML (теги)
- выбрать все элементы одного и того же типа (тега) для каждой группы типов (тегов)
- Сократить каждую группу типов (тегов) до последнего элемента в группе
- Удовлетворяет ли этот оставшийся элемент (каждой группы) селектор (без псевдо)?
- Если true, тогда применяйте стиль, иначе не
Это означает (как показывает и мой пример), что несколько родственных элементов могут удовлетворять этому селектору, если они имеют другой тип.
Кажется, это работает одинаково в Chrome и Firefox. И если мы внимательно прочитаем спецификацию, это говорит
Псевдокласс
:last-of-typeпредставляет элемент, который является последним братом своего типа в списке дочерних элементов его родительского элемента.
Если бы он сказал, что это последний брат, который удовлетворил селектор, то мое верхнее решение сработало бы. Итак, давайте проверим мои шаги.
Выполните шаги, используя ваш HTML
- получает первые 3 элемента
- только один тип:
div - четыре элемента (включая последний)
- уменьшить до последнего
- удовлетворяет? нет
- не устанавливать стиль
Другая пара примеров в моей скрипке
Чтобы проверить поведение селектора псевдоклассов, я добавил два дополнительных примера. Вот HTML-код:
<!-- First -->
<div>
<div>Content</div>
<div>Content</div>
<p>Content</p>
<p>Content</p>
</div>
<!-- Second -->
<div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<p>Content</p>
</div>
В первом случае два элемента удовлетворяют селектору (последний div и последний p ).
Во втором один элемент удовлетворяет селектору (последний div )
результат
Имея предоставленный вами HTML- .MyClass и предполагая, что в .MyClass может быть произвольное количество элементов, невозможно написать общий селектор в CSS3, который бы фактически нацелился на последний элемент с определенным классом CSS.
Лучший способ — добавить дополнительный класс к элементам, представляющим последний класс с определенным классом, и написать селектор для этого.