Отступ для всех блоков, кроме первого или последнего

266
20 декабря 2017, 20:16

Приветствую!

К примеру: есть список с четырьмя элементами

<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 нет отдельного свойства для этого?

Answer 1

Может так что-то можно сварганить?

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 - задаёт правила стилей для элементов, которые не содержат указанный селектор.

Answer 2

С помощью 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>

READ ALSO
Как создать pattern или path цепи вдоль линии

Как создать pattern или path цепи вдоль линии

Мне необходимо создать pattern цепи расположенный вдоль линииЯ попытался создать markers в форме звена цепи, но возникли проблемы с ориентацией...

334
Выбор активного блока

Выбор активного блока

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

208
Fixed/sticky sidebar with flexbox

Fixed/sticky sidebar with flexbox

Уже много гуглил, но так и не смог найти ответа для себя, где-то работает, где-то - нетНе могу понять как сочетаются position: fixed и display: flex

354