Skip to content

Instantly share code, notes, and snippets.

@yunusga
Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yunusga/a45e027569dc61dfea81 to your computer and use it in GitHub Desktop.
Save yunusga/a45e027569dc61dfea81 to your computer and use it in GitHub Desktop.
Приведение `свойства-top` у первого потомка и `свойства-bottom` у последнего потомка к `0`

Применение:

@include firsLastIndentReset($elem, $prop);

$elem - элемент DOM (класс или тег) для класса заключаем селлектор в кавычки '.item'

$prop - CSS свойство имеющее модификаторы top и bottom

Вызов без параметров сбрасывает margin-top и margin-bottom у элементов p

.edit-block__body {
  @include firsLastIndentReset();
}

на выходе получаем

.edit-block__body p:first-of-type,
.edit-block__body p:first-child {
  margin-top: 0;
}
.edit-block__body p:last-of-type,
.edit-block__body p:last-child {
  margin-bottom: 0;
}

Вызов c параметрами сбрасывает padding-top и padding-bottom у элементов .menu__item

@include firsLastIndentReset('.menu__item', padding);

на выходе получаем

.menu__item:first-of-type,
.menu__item:first-child {
  padding-top: 0;
}
.menu__item:last-of-type
.menu__item:last-child {
  padding-bottom: 0;
}
/**
 * $tag элемент или класс (для класса . в имени, обязательна)
 */
@mixin firsLastIndentReset($elem : p, $prop : margin) {
  #{$elem}:first-of-type,
  #{$elem}:first-child {
    #{$prop}-top : 0;
  }
  #{$elem}:last-of-type,
  #{$elem}:last-child {
    #{$prop}-bottom : 0;
  }
}

htmlbook.ru/css/first-of-type, htmlbook.ru/css/last-of-type

поддержка caniuse.com/#search=first-of-type

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment