Есть ли способ указать сокращение CSS для "всех элементов, кроме первого/последнего"?

Очень часто естественно указывать стиль CSS для всех элементов, кроме первого (или последнего). Например, при стилизации абзацев вы хотите добавить нижнее поле для каждого элемента, кроме последнего (или аналогично верхнего поля для каждого элемента, кроме первого).

Есть ли способ сделать это:

более кратким, чем определение p {...}, а затем p:first-child {...}?
более простой и интуитивно понятный, чем p:nth-child(-n+1)?

Если этого не произошло, знаете ли вы о какой-либо попытке добавить его?

Ответ 1

Для всех элементов p, кроме первого, используйте один из них (второй лучше поддерживается):

p:not(:first-child)
p:first-child ~ p

Для всех p элементов, кроме последнего дочернего элемента:

p:not(:last-child)

Для всех p элементов, кроме первого и последнего дочерних элементов:

p:not(:first-child):not(:last-child)

Как обычно, CSS3 :not() и :last-child не поддерживаются до IE9 + и относительно новых версий других браузеров. Вы не достигнете очень большого уровня поддержки браузеров (IE8 и старше), если вы не добавите классы к вашим первым и последним детям, используя JavaScript или иным образом.

Помните, что вертикальные поля сворачиваются между пунктами в потоке и их предками (ами), поэтому, если вы не хотите обнулить поля элемента контейнера для этих пунктов Кроме того, вам не нужно будет обнулять поля первого и последнего элементов p. Здесь fiddle, чтобы проиллюстрировать.

Ответ 2

Ну, вы могли бы сделать:

p:not(:first-child) {...}

Но только самые последние браузеры поддерживают класс :not psuedo.

Кроме этого, нет. Ваш лучший вариант - указать стиль для всех и затем переопределить его для первого/последнего.

Ответ 3

Если поддержка IE7-8 не нужна, вы можете использовать :not() селектор CSS.

Но если вам нужно поддерживать IE7 +, что может быть и так, есть небольшой трюк, который вы можете использовать, и обычно получает вас достаточно далеко. Менее известный факт состоит в том, что селектор :first-child psuedo фактически работает в IE7 + (но не :last-child хотя), а некоторые другие селектора css и это делает такие вещи, как добавление вертикальных полей в горизонтально плавающий макет.

Представьте себе этот html:

<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

И это как некоторый CSS:

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; }

Итак, теперь все элементы списка расположены горизонтально рядом друг с другом, и теперь мы хотим добавить маржу в BETWEEN все элементы, но не с правой или с левой стороны, мы можем сделать это в css:

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; margin-left: 10px; }
ul > li:first-child { margin-left: 0; }

Это обычно охватывает 95% случаев, когда я хочу что-то уникальное, а остальные "забытые" селектора покрывают еще несколько процентов, после этого вам нужно добавить некоторые классы, которые обычно не являются узким местом в бэкэнд страницы.

Ответ 4

Я бы предложил использовать first-of-type:

p:not(:first-of-type) { ... }

Поддержка браузера (caniuse)