Приветствую!
К примеру: есть список с четырьмя элементами
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<ul>
между которыми нужно сделать отступ по высоте, так, чтобы при li { margin-top; } первый элемент списка не сдвигался вниз от края родителя.
Если проще: нужно чтобы для первого li, margin-top не срабатывал.
Тоже самое справедливо и для margin-bottom, только в этом случаи - отступа не должно быть после последнего элемента.
Понятно что сдвигаемому элементу можно назначить признак(например дать класс) и уже по нему назначить margin, но неужели в CSS нет отдельного свойства для этого?
Может так что-то можно сварганить?
ul li:not(:first-child):not(:last-child) {
background: red;
/*
тут блок свойств общих для всех li
кроме первого и последнего
*/
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
:first-child - применяет стилевое оформление к первому дочернему элементу своего родителя.
:last-child - задает стилевое оформление последнего элемента своего родителя.
:not - задаёт правила стилей для элементов, которые не содержат указанный селектор.
С помощью li:first-child, li:last-child.
ul {
border: 1px solid black;
padding: 0;
}
ul ul {
display: none;
}
li {
border: 1px solid red;
list-style: none;
}
/* Code */
li {
margin: 10px 0;
}
li:first-child {
margin-top: 0;
}
li:last-child {
margin-bottom: 0;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<ul>
Однако если есть скрытые элементы, как например в примере выше, из-за чего не применяется li:last-child, то можно использовать li:first-of-type и li:last-of-type.
ul{
border: 1px solid black;
padding: 0;
}
ul ul{
display: none;
}
li{
border: 1px solid red;
list-style: none;
}
/* Code */
li{
margin: 10px 0;
}
li:first-of-type{
margin-top: 0;
}
li:last-of-type{
margin-bottom: 0;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<ul>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости