Как выбрать первые 2 <li> элементы с помощью css

Привет, я хочу применить css для первых 2 элементов (один, два), которые смежны с первым элементом <p>.

<div class="one">
    <ul>
        <p>
            <li>One</li>
            <li>Two</li>
        <p>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

После применения ко всем элементам li

.one ul p:nth-child(odd) ~ li {
    background: lightsteelblue;
}

Ответ 1

Для первых 2 li элементов внутри ul p попробуйте:

.one ul li:nth-child(-n+3){
    // your style
}

Смотрите jsfiddle

И как говорили другие товарищи: у вас неправильная разметка.

Если вы удалили элемент p, попробуйте:

.one ul li:nth-child(-n+2){
    // your style
}

Смотрите jsfiddle

Обновление: Мое предложение состоит в использовании другого ul вместо p: значит, у вас есть допустимая разметка и такой же результат:

HTML

<div class="one">
    <ul>
        <li>0</li>
        <li>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>3</li>
            </ul>
        <li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

CSS

.one ul {
    padding: 0;
    list-style-type: none;
}
.one ul ul li:nth-child(-n+2){
    // your style
}

Обновлен jsfiddle

Примечание: В качестве последнего комментария, если у вас есть только 2 специальных элемента li, почему бы просто не определить имя класса... <li class="bold"> Сделать это просто >

ul li.bold {
    // your style
}

Ответ 2

Это должно быть совместимо с IE8 (только для селекторов CSS 2.1):

li:first-child, li:first-child+li {
    color: blue;
}

Ответ 3

Первые три элемента, которые вы можете выбрать, например,

ul li:nth-of-type(-n+3) {

}

Но, как и многие другие, ваша разметка недействительна, и вы должны ее правильно исправить.

Ответ 4

Как и другие уже упоминавшиеся, прямой ответ будет li:nth-child(-n+2) {... }.

Я не знаю о вас, но когда я впервые -n+2 эту часть -n+2, моя реакция была "что? Это опечатка?". Итак, для тех, кто любит знать небольшое объяснение, а не просто копировать и вставлять нелогичное волшебство, здесь я включаю ссылку на замечательную запись в блоге Сары Коуп, объясняющую часть -n+2:

Синтаксис для выбора первого числа элементов немного противоречит интуиции. Вы начинаете с -n плюс положительное количество элементов, которые вы хотите выбрать. Например, li: nth-child (-n +2) выберет первые 2 элемента li.

Такое объяснение даже отсутствует в w3cshool для nth-child.