Отображение первых 3 элементов списка и скрытие остальных с помощью CSS nth-child

Можно ли выбрать несколько дочерних элементов с определенным числом с помощью селекторов CSS?

Я хотел бы скрыть все элементы списка в прошлом №3:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> //hide this
<li>5</li> //hide this
</ul>

ul li:nth-child(X) {  
          display:none;
        }

Ответы

Ответ 1

Я не знаю, какой браузер поддерживает это, но вы можете передать формулу: nth-of-type():

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

Подробная информация о: http://www.w3schools.com/cssref/sel_nth-of-type.asp

Edit

Я изменил его с (n + 4) до (1n + 4), так как первая версия работает, но недействительна. Я использую это в медиа-запросах, чтобы скрыть вырезанные элементы на меньших экранах.