IE8: что использовать вместо nth-of-type (n)?

Я унаследовал следующий CSS-код, чтобы сначала скрыть последние элементы серии абзацев и серии элементов списка.

.profileSection p:nth-of-type(n+2) {
    display: none;
}

.profileSection li:nth-of-type(n+6) {
    display: none;
}

Очевидно, что этот код не работает в IE8. Что такое альтернативный способ скрыть эти элементы?

Ответ 1

+, смежный селектор, позволит вам выбрать всех родных братьев, которые сразу прилегают друг к другу. В вашем случае: .profileSection p+p. (Если вы должны это сделать, подумайте об этом, чтобы предотвратить просмотр других браузеров, например условные комментарии.)

Но + не поможет, если ваша разметка содержит что-то отличное от элементов <p> рядом друг с другом. Например:

<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>

Если у вас еще нет каких-либо shiv или moderizr на этой странице (что поможет в решении многих других подобных проблем), было бы проще добавить специальный класс к элементам и выбрать с помощью этого класса.

Ответ 2

Вот обсуждение на нем:

http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/

Писатель упоминает, что вы можете ссылаться на определенный дочерний элемент, используя

tagname + tagname + etc

Или получить родовые дети, используя

* + * + etc

Я бы просто добавил специальный класс к этим элементам.

Ответ 3

Вы также можете попробовать загрузить и включить selectivizr, что делает селектора css3 работать в IE6-8