Приветствую!
К примеру: есть список с четырьмя элементами
<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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Мне необходимо создать pattern цепи расположенный вдоль линииЯ попытался создать markers в форме звена цепи, но возникли проблемы с ориентацией...
Наверное не правильно описал в титуле, но дам конкретикуКак реализовать подобный вариант описания услуг? Интересует техническая часть, либо...
Уже много гуглил, но так и не смог найти ответа для себя, где-то работает, где-то - нетНе могу понять как сочетаются position: fixed и display: flex