CSS или HTML5 для первого и последнего элемента

Question

Пользователи могут вводить описания, которые могут включать абзацы или списки. Или они могут просто вводить текст без каких-либо элементов <p> или <ul>. Что мне нужно сделать, так это удалить большую часть отступов и полей над первым элементом и под последним элементом, чтобы пользователь ввел содержимое, которое имеет приятную узкую границу вокруг него . Поэтому я мог сделать одно из следующего:

• Используйте правило css, о котором я не знал, чтобы нацеливать только первый и последний элементы
• Используйте css3 или html5 (я полагаю, что в них есть что-то, что позволяет легко делать то, что я хочу) и надеюсь, что все обновят свои браузеры как можно скорее, в то время как старые браузеры просто получают немного более уродливую версию страницы
• Найдите первый и последний элементы с помощью Javascript и измените их соответствующим образом
• Изменить HTML, чтобы добавить класс, такой как <p class="first">

В идеале 1-е решение существует, не так ли? Я согласен со вторым решением, хотя, если нет, существует ли оно? Последние 2 мне все равно ...

ОБНОВЛЕНИЕ : не волнует IE6. Но мне нужно разобраться с ситуацией, что если для начала есть только текст, без каких-либо <p> или <ul> или других элементов, то на самом деле ничего не нужно делать для верхнего поля / отступа.

Answer 1

Используйте :first-child и :last-child, как это. Обратите внимание, что > и :first-child (CSS2) не работают в IE6 и ниже, а :last-child (CSS3) не работает в IE8 и ниже. Единственный реальный обходной путь для обоих заключается в использовании классов .first и .last соответственно (вы можете добавлять их динамически с помощью JavaScript, как говорит Phrogz).

.description > p, .description > ul {
    margin: 1.5em 0;
}

.description > :first-child {
    margin-top: 0;
}

.description > :last-child {
    margin-bottom: 0;
}

Я добавил комбинатор > для предотвращения выбора таких элементов, как strong или li. Что это значит?

Answer 2

Рассматривали ли вы оборачивать содержимое в контейнер с отрицательным полем? Требуется, чтобы содержимое было как минимум обернуто в один элемент p (нетрудно проверить / добавить мелодраматически).

CSS:

.container {border:1px solid black;}
.container .subcontainer {margin:-1em 0;}
.container p {margin:1em 0;}

HTML:

<div class="container"><div class="subcontainer">
    <p>My first paragraph.</p>
    <p>My second paragraph.</p>
</div></div>

Answer 3

Ответ BoltClock прекрасно работает в большинстве случаев, но IE8 и более ранние версии игнорируют псевдоселекторы :...-child.

Вы можете использовать jQuery для достижения той же цели, ориентируясь на большее количество браузеров.*

Answer 4

Как то так?

.container * + p, .container * + ul
{
  margin: 1em 0 0;
}

.container p, .container ul
{
  margin: 0;
}