Как использовать псевдоклассы для выбора всех дочерних элементов, кроме первого и последнего?

В CSS, для примера, показанного ниже, как я могу сделать так, чтобы стили применялись ко всем абзацам, кроме первого и последнего абзаца?

<div class="entry">
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

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

div.entry p:nth-child(n+1) {
    /* ... */
}

Я также пробовал nth-of-type() и not(), но не смог заставить их работать так, как я думал.

Редактировать: я решил обернуть все <p>, к которым я хочу применить стиль, в <div>. Я принял ответ боздоза, потому что он ближе всего подходил к решению исходной проблемы (хотя и решил только половину ее).


css css-selectors pseudo-class
person Ben    schedule 30.01.2012    source источник
comment
Сначала посмотрите, где они поддерживаются: quirksmode.org/css/contents.html.   -  person Diodeus - James MacFarlane    schedule 30.01.2012

Ответы (3)


arrow_upward
13
arrow_downward

Обновленный ответ:

Используйте как :not(:first-child), так и :not(:last-child)

div.entry p:not(:first-child):not(:last-child)

См. обновленный JSFiddle.

person bozdoz    schedule 30.01.2012
comment
Я не уверен, почему это получило 8 голосов - оно касается только половины вопроса, то есть, за исключением первой части, и полностью игнорирует другую половину вопроса. - person BoltClock; 12.05.2014
comment
Обновлено. Теперь решает обе половины проблемы. @BoltClock Я также размышляю над загадкой ответов SO: некоторые незаслуженные получают огромные голоса, а некоторые чрезвычайно заслуженные получают мало, а некоторые достойные получают отрицательные голоса. Честно говоря, я почти заставил меня бросить отвечать на вопросы о SO. Пользователи часто бывают жестокими и необычными. - person bozdoz; 13.05.2014
comment
Редактирование вашего ответа на чей-то более правильный ответ не совсем подходит. - person WORMSS; 13.05.2014
comment
Это правильный ответ. Я уже ответил на первую половину. Я честно не видел твоего, если это поможет. @WORMSS - person bozdoz; 13.05.2014
comment
@WORMSS: здесь я на грани. Я бы, наверное, сам придумал точно такое же решение. Конечно, есть много способов снять шкуру с кошки, например. альтернативой, которая больше соответствует исходному ответу, будет :not(:nth-child(1)):not(:nth-last-child(1)). Но тогда это кажется излишне многословным, когда :first-child и :last-child уже существуют. Я не думаю, что он собирался копировать ваш ответ. - person BoltClock; 14.05.2014
comment
Но у него был свой ответ здесь в течение 2 лет, который ответил только на половину вопроса ОП. Через 10 часов после того, как я добавлю свой ответ, он таинственным образом изменится. (опять же через 2 года) на мой ответ. - person WORMSS; 14.05.2014
comment
Я отредактировал свой ответ из-за комментария BoltClock. Я даже не видел редактирования OP, в котором говорилось, что я ответил наполовину. Я предполагаю, что этот вопрос был поднят из-за этого или какого-то другого редактирования, и я также предполагаю, что это причина, по которой вы ответили @WORMSS - person bozdoz; 14.05.2014
comment
Нет, это был мой ответ, который вызвал удар. - person WORMSS; 19.05.2014
comment
Не понял, @WORMSS. Я просто пытался уберечь BoltClock от гнева на меня. Если тебя это утешит, я дал тебе +1. Больше я ничего не могу сделать. - person bozdoz; 19.05.2014

arrow_upward
2
arrow_downward

Я знаю, что опаздываю на это, но я подумал, что просто добавлю это для будущих зрителей.

div.entry p:not(:first-child):not(:last-child)

person WORMSS    schedule 12.05.2014

arrow_upward
0
arrow_downward

Я просто наткнулся на то, что может ответить на ваш вопрос:

Для представления всех дочерних элементов h2 тела XHTML, кроме первого и последнего, можно использовать следующий селектор:

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

W3C — CSS3-селекторы

person Peter Müller    schedule 13.04.2013