Интересует только 1 вопрос: почему не работает :last-of-type?
.column:first-of-type выделяет первый див с классом column
.column:last-child ровно также как и .column:last-of-type не выделяет второй див с классом column.
ul:last-child выбирает последний дочерный элемент родителя, и этот элемент должен быть <ul>.(он то понятно почему не работает, тут без проблем)
ul:last-of-type выбирает последний дочерный элемент родителя который является <ul>. Тоесть выбирается последний дочерный <ul> из всех дочерных <ul> родителя.
Я правильно понимаю? Похоже что нет, ибо эти правила не работают.
P.S. проверил в саблайме, та же фигня…
А добавить еще один блок не пробовали? Чтоб их было 3 а не 2
Немного не понял сути предложения. В задании всего 3 дива.
К сожаленью не могу проверить компьтера рядом нет
Упрощенная версия замеченого явления(укоротил в саблайме).
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Последнее испытание</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
</head>
<body>
<div class="column">
первый див
</div>
<div class="column">
второй див
</div>
<div class="table">
табличка
</div>
</body>
</html>
CSS
.column:first-of-type {
background-color: green;
}
.column:last-of-type {
background-color: red;
}
Результат.
В итоге вопрос: где ниже ошибка(прошу внимательно вчитаться)? Ибо ul:last-of-type не работает тут…
ul:last-child выбирает последний дочерный элемент родителя, и этот элемент должен быть <ul>. Если это будет не <ul> , то css-свойства на него не наложаться. И впринципе все.
ul:last-of-type выбирается последний дочерный <ul> из всех дочерных <ul> родителя.
А попробуйте сделать так, табличку со вторым column местами поменяйте, если конечно не пробовали уже.
<body>
<div class="column">
первый див
</div>
<div class="table">
табличка
</div>
<div class="column">
второй див
</div>
</body>
(в коде сверху) второй див горит красным.
<body>
<div class="column">
первый див
</div>
<div class="table">
табличка
</div>
<div class="column">
второй див
</div>
<ul>
<li></li>
<li></li>
</ul>
<span>спанский</span>
</body>
(в коде сверху) второй див горит красным.
<body>
<div class="column">
первый див
</div>
<div class="table">
табличка
</div>
<div class="column">
второй див
</div>
<div>
третий див
</div>
</body>
(в коде сверху) А вот тут второй див уже не горит красным.
Ко всем трем примерам был такой css:
.column:first-of-type {
background-color: green;
}
.column:last-of-type {
background-color: red;
}
первый див горел зеленым во всех трех примерах(тут все нормально).
Но какого черта не работает :last-of-type ?
Прошу помочь всех неравнодушных 
Если проследить закономерность, то получается, что :last-of-type ищет элемент именно по типу (в данном случае div-у). В последнем примере “второй див” не является последним div-ом у родителя.
`
первый див
табличка
второй див
третий див
второй див
`
вот в таком виде кода все работает верно, как я и думал чтобы псевдо класс применился к селектору, нужно чтобы элемент с этим классом был последним в общем списке, получается что как сказала Ineska отсчет идет и по классам и по дивам, если данный класс не последний див, то окрашивание не произойдет. Так сказать псевдо-класс для того чтобы тыкнуть носом в нужный элемент с нужным классом в конце списка.
2 лайка
Потестил эту муть немного, инфу поискал. Вот что вышло…
Короче :last-of-type как и :nth-last-of-type работают исправно и аналогично-противоположно(аля словоблуд) как и :first-of-type ,просто есть одна важная особенность.
Вот тут можно поиграть с этим явлением: http://jsfiddle.net/a5r3jut3/ .
Короткое и ясное правило для использования этого псевдо класса: (путь к последнему такому дочерному тегу родителя):last-of-type
Дальше примеры:
.
-
http://jsfiddle.net/djvgaw57/
Класс box выставлен в трех тегах<div>и стиль применится к последнему тегу<div>из всей трехэлементной последовательности тегов<div>.
. -
http://jsfiddle.net/mkj7fatu/
Класс box у двух последовательностей - выбирается последний тег в каждой последовательности.
. -
http://jsfiddle.net/jbffqkLh/
Оказывается даже не важно какие классы будут у тегов, которые находятся в последовательности, и которые не являются последним тегом в последовательности. Важен класс только последнего тега в последовательности.
. -
http://jsfiddle.net/fn4s14gn/
При изменении класса последнего тега в последовательности - стили не накладываются на последний тег, и собсно все.
. -
http://jsfiddle.net/9fjppk95/
Но если такой класс присутствует в последнем теге последовательности таких же тегов - стили накладываются и все работает.
. -
http://jsfiddle.net/56kqvyzg/
Всегда ведь можно импровизировать.
. -
http://jsfiddle.net/zn3mq0mo/ Вот это самая интересная!
Класс box у тега<div>и<span>,
- Все
<div>'ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный<div>этого родителя; - Все
<span>'ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный<span>этого родителя;
.
- Еще раз перечитай правило и зырь сюда http://jsfiddle.net/515pg3j2/ , сечешь?
Только последний дочерный тег родителя из всех таких же дочерный тегов этого же родителя.
. - Ну и на финал http://jsfiddle.net/nag633rc/
Вроде формулировку использовал правильную, делал пост и пытался понять 3 часа. Даже если что то не сказал, это можно понять по выложеным примерам.
Слово “Последовательность” использовалось для замены формулировки “Последовательность дочерных одинаковых тегов в общем родителе”
1 лайк
Ну значит тема закрыта раз нашли ответы на все вопросы)