Shortcodes Frontend: Сброс списков
#shortcodes #frontend #lists #css #sass
Сейчас поговорим о том, как сбросить все списки, у которых есть класс. Нужно это для того, чтобы списки с классами не были стилизованы по дефолту. Сброс списков - достаточно часто встречается в вебе, так как список семантически удобен для перечисления схожих по структуре элементов.
#shortcodes #frontend #lists #css #sass
Сейчас поговорим о том, как сбросить все списки, у которых есть класс. Нужно это для того, чтобы списки с классами не были стилизованы по дефолту. Сброс списков - достаточно часто встречается в вебе, так как список семантически удобен для перечисления схожих по структуре элементов.
Shortcodes Frontend: Mixin для контейнера на SASS и Media Queries внутри селектора
#shortcodes #css #web #sass #frontend #container #adaptive
Используем SASS для того чтобы быстрее разрабатывать сайты.
Сейчас поделюсь двумя достаточно полезными вещами, которыми сам пользуюсь постоянно. Начну с простого - контейнеры.
#shortcodes #css #web #sass #frontend #container #adaptive
Используем SASS для того чтобы быстрее разрабатывать сайты.
Сейчас поделюсь двумя достаточно полезными вещами, которыми сам пользуюсь постоянно. Начну с простого - контейнеры.
Сокращения селекторов с помощью `:not`
#css #web
Бывало ли у вас такое, что вы пишете стили для списка и у последнего элемента не должно быть отступа вниз? Как мы это обычно делаем:
Ещё один способ как можно удобно "обделить" последний элемент - использование псевдо-класса
#css #web
Бывало ли у вас такое, что вы пишете стили для списка и у последнего элемента не должно быть отступа вниз? Как мы это обычно делаем:
cssМожно сделать это же действие несколько короче, существует два более коротких способа, как можно это сделать:
li {
margin-bottom: 1rem;
}
li:last-child {
margin-bottom: 0;
}
cssСелектор с использованием
li + li {
margin-top: 1rem;
+
прописывает стили для двух элементов, которые идут последовательно, причём стили применяются к последнему указанному элементу, поэтому тут мы и прописываем margin-top
.Ещё один способ как можно удобно "обделить" последний элемент - использование псевдо-класса
:not
:cssЭтот код даст тот же результат, что и селектор
li:not(:last-child) {
margin-bottom: 1rem;
}
li+li
, однако тут мы явно указываем, что прописываем стили для всех элементов li
, которые могут идти и не последовательно и не стилизуем только последний элемент с помощью псевдо-элемента :last-child
👍1