Почему класс. Последний: не работает?

Почему это не работает? http://jsfiddle.net/84C5W/1/

<style>
   p{
     display : none;
   }
   p.visible:last-of-type {
     display : block;
   }
</style>
<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

Фактически ни один из моих <p> видны. Если я удалю ссылку на ".visible" в таблице стилей, это покажет последний <p> в div, но это не то, что я хочу.

Конечно, я мог бы всегда держать один "видимый" всегда, но это для презентации opens.js, и у меня нет контроля над javascript. Только таблица стилей...

Edit: Хорошо, так очевидно. Class: last-of-type не работает. По словам @Justus Romijn, псевдокласс класса last-of-type был предназначен только для выбора элементов (что, на мой взгляд, чрезвычайно ограничивает, и помещает этот конкретный псевдокласс в более или менее бесполезное состояние).

В любом случае, я хочу перефразировать мой вопрос на этом этапе: как я могу выбрать последний элемент внутри div с классом ".visible"? Я НЕ хочу использовать Javascript для этого.

Ответы

Ответ 1

Я провел некоторое тестирование, но селектор last-of-type работает только с node -селекторами, а не с именами классов.

HTML:

<p class="visible">First paragraph.</p>
<p class="visible">Second paragraph.</p>
<p>Third paragraph.</p>

CSS

p:last-of-type{
  /* this will be applied in the third paragraph bacause the pseudo-selector is applied  to nodes only */
  font-weight: bold;
}
p.visible:last-of-type {
  /* this does not get applied, because you are using the pseudo-selector with a class. */
  display: block;
}

Из W3C:

Псевдокласс last-of-type представляет собой элемент, который является последним sibling его типа в списке дочерних элементов его родительского элемента.

Поскольку он должен быть родным братом, он, вероятно, игнорирует имена классов, потому что тогда вы можете смешивать его с другими элементами.

Почему нет последовательного или родительского селектора? Это может потенциально блокировать блокировку множества веб-страниц, динамически изменяя одно имя класса на странице. Широкое использование селекторов CSS3 уже тяжело в браузере и не рекомендуется.

Дейв Хаятт, работая над внедрением WebKit в 2008 году, упомянул некоторые причины, по которым избегают эти реализации:

С родительскими селекторами становится чрезвычайно легко случайно обломка документа. Люди могут и будут злоупотреблять этим селектором. Поддержка этого дает людям целую веревку, чтобы повесить себя с.

Печальная правда о селекторах CSS3 заключается в том, что они действительно не должны быть если вы заботитесь о производительности страницы. Украшение вашей разметки с классами и идентификаторами и совпадающими с ними, избегая при этом всех использование селекторов, дочерних и дочерних селекторов фактически сделает страница выполняется значительно лучше во всех браузерах.

Ответ 2

Проблема заключается в том, что :last-of-type соответствует только селектору элемента. В вашем примере вы пытаетесь сопоставить селектор class. Вот почему он не работает.

Пример: http://dabblet.com/gist/4144885

Ответ 3

Настройте таргетинг на второй последний тег.

.visible:nth-last-of-type(2) {}

Ответ 4

Для справок в будущем это будет рассмотрено в уровне CSS 4: https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

Поддержка браузера на момент написания не существует: http://css4-selectors.com/selector/css4/structural-pseudo-class/

Когда это будет готово, это должно быть решением:

p {
  display : none;
}
p.visible:nth-last-match(0) {
  display : block;
}

<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

Ответ 5

так я обошел проблему, не относящуюся к классу - к сожалению, это решение javascript:

function lastOfType(className){
        var allElemsOfType = $("."+className);
        if (!allElemsOfType || !allElemsOfType.length) return null;
        else return allElemsOfType[allElemsOfType.length - 1];
}

Ответ 6

в моем случае, я сделал ошибку.

p.visible : last-of-type (x)
p.visible:last-of-type   (o)

что я сделал