css: nth-child(): after

Можно ли смешивать :nth-child() и after?

У меня есть <ol> элементов, и я хочу добавить текст :after. Это прекрасно работает, но я хотел бы иметь другой текст на 1-м, 2-м и 3-м позициях, а затем 4-й, 5-й и 6-й.

С приведенным ниже кодом я заканчиваю тем, что у каждого li "крупного" розового цвета после него.

Это не имеет для меня никакого смысла, но я новичок в этом малярии nth-child.

data.html

<ol id="id" class="ui-sortable">
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>

    <!.. repeats -->

    <li>
        <p>Bacon</p>
    </li>
</ol>

pretty.css

#id li p:after {
    float: right;
    content: 'nom';
}

#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
    content: 'OM';
    color: pink;
}

#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
    content: 'Nom';
    color: blue;
}

Мне бы очень хотелось, чтобы я не делал этого с помощью js, так как это просто "приятная возможность".

Я беспокоюсь только о новых браузерах, поэтому нет необходимости в обходных решениях для oldIE и т.д.

Ответ 1

Вы можете, но вы делаете это неправильно.

Проблема в том, что все ваши p элементы находятся внутри li. Таким образом, все они являются первым ребенком их контейнера li.

Вам нужно будет поместить nth-child элемент в элементы li.

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

Цитирование документации W3C

Обозначение псевдо-класса :nth-child(an+b) представляет собой элемент, в котором есть перед ним в дереве документов + b-1, для любого положительного целого или нулевого значения n и имеет родительский элемент.

Обновление 1

Вы также можете упростить это, используя

#id li:nth-child(-n+3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
    content: 'Nom';
    color: blue;
}

Демо на странице http://jsfiddle.net/gaby/4H4AS/2/

Обновление 2

Если вы хотите, чтобы первые шесть были разными (а не первые 3 и последние 3), вы могли бы

#id li:nth-child(-n+6) p:after { /*this means first 6*/
    content: 'Nom';
    color: blue;
}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
    content: 'OM';
    color: pink;
}

Демо на http://jsfiddle.net/gaby/4H4AS/3/

Ответ 2

Должно быть сделано так:

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}
#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

JS Fiddle.

... как <p> всегда является первым дочерним элементом <li> в отображаемой структуре HTML.

Однако учтите, что content: 'nom'; правило в самом первом определении стиля было перезаписано (но стояло правило "float"): это одно и то же каскадное правление для псевдоэлемента ": after", как и для остальных. )