Css вложенные стили: Вложенные селекторы — Основы CSS — HTML Academy

Leave a Comment / Css / By /

Вложенные селекторы — Основы CSS — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый.

Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> Раздел про навыки </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page. png») no-repeat top center; } h2 { font-size: 36px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } /* Замените селектор ниже */ nav a { color: #ffffff; } /* Замените селектор ниже */ ul { list-style: none; padding-left: 0; } /* Раскомментируйте правило ниже */ /* .blog-navigation h3 { margin-top: 0; } */ /* Раскомментируйте правило ниже */ /* .blog-navigation li { margin-bottom: 5px; } */ footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. Смените селектор по тегу в правиле nav a на вложенный селектор .blog-navigation a,
  2. затем замените селектор в правиле ul на селектор .blog-navigation ul.
  3. Раскомментируйте правило .blog-navigation h3 в CSS-редакторе,
  4. а затем раскомментируйте правило для .blog-navigation li.

Вложенные правила · Less. Путеводитель для новичков

В хорошо структурированных таблицах стилей нет необходимости присваивать каждому элементу классы. Достаточно лишь более подробно описывать стили элементов, используя возможность вкладывать селекторы в другие селекторы. К слову, такие селекторы называются вложенными и представляют собой объёмную структуру.

Пример 2.2.1

Ниже приведён так называемый «подробный CSS», в котором представлена модель вложенности одних селекторов в другие селекторы.

. global-header {
  background-color: #f5f5f5;
  color: #443d3d;
  border-bottom: 1px solid #ddd;
}
.global-header h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
}
.global-header h2 small {
  font-size: 2rem;
}
.global-header .header-actions {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

Решение проблем

Все это хорошо, но ровно до тех пор, пока имена классов короткие, глубина вложенности не велика, а ваши глаза в состоянии уследить за этой структурой. Лично я, до тех пор, пока не стал пользоваться CSS-препроцессорами, писал код именно так, попутно разделяя CSS-файл на логические блоки и пытаясь уследить за его чистотой. Это удобно и практично, но мне быстро надоедало сортировать код по вложенности, и моя таблица стилей иногда была похожа на мешанину из букв и цифр. Разумеется, что перед финальной сборкой проекта все это исправлялось, но это не тот случай, на который хочется тратить время.

Представьте себе оглавление простейшей книги, например, такое:

1.  Глава 1. Это моя первая глава книги
1.1. Это мой первый рассказ о том, что я сделал
1.1.1. Немного подробнее о том, что я сделал
1.2. Это мой второй рассказ о том, что я сделал
1.Х. ...

Здесь довольно легко понять, что пункт 1.1 — это следствие первого пункта. Но тем не менее, если переписать это в более читабельном формате, можно сэкономить время на обработке цифр в голове. Абстрактно, можно представить следующий формат:

Это моя первая глава книги
    Это мой первый рассказ о том, что я сделал
        Немного подробнее о том, что я сделал
    Это мой второй рассказ о том, что я сделал

Именно такая модель вложенности присутствует в Less, когда один селектор, в прямом смысле слова, вкладывается в другой селектор. Таким образом получается легко поддерживаемая, читаемая и приятная глазу структура. Если же попытаться спроецировать такую модель на CSS-код, то она будет иметь вид:

.class-1 {
  property: value;
  .class-2 {
    property: value;
  }
  .class-3 {
    property: value;
  }
}

Для большей наглядности я предлагаю обратиться к конкретному примеру, в котором я постараюсь сопоставить классический CSS и Less код.

Пример 2.2.2

Здесь я переписал код из примера 2.2.1, заменяя классический синтаксис на препроцессорный.

.global-header {
  background-color: #f5f5f5;
  color: #443d3d;
  border-bottom: 1px solid #ddd;
  h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 4rem;
    small {
      font-size: 2rem;
    }
  }
  .header-actions {
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }
}

На изображении ниже представлена модель вложенности, описываемая в этом примере. Для наглядности и понимания сути происходящего экран разделен на две части, где слева код написан на препроцессорном языке, а справа на «чистом» CSS.

Мысли и советы

Согласитесь, теперь ваш код становится интуитивно понятным и удобным для чтения. В такой структуре сложно запутаться и потеряться среди селекторов, ведь здесь чётко видна их вложенность и не нужно помнить имя родительского селектора — за нас это делает компилятор.

Предостережение!

Постарайтесь запомнить раз и навсегда, что вкладывать селекторы друг в друга можно бесконечно, но делать это строго не рекомендуется! Многие разработчики советуют следить за тем, чтобы структура, в общем случае, не превышала трёх вложений. Нет необходимости вкладывать селекторы, начиная от родительского, на такую глубину. Максимально допустимый уровень, в крайних случаях, пять вложений. Старайтесь избегать крайних случаев, если это действительно не требуется.

Собственное вложение CSS: что вам нужно знать

Когда мы используем препроцессор CSS, такой как Sass или Less, мы можем вложить правило стиля CSS в другое правило для написания чистого и понятного кода. Это правило вложенности еще не поддерживается в собственном CSS. На данный момент это рабочий проект и доступен только для обсуждения.

Однако в этом уроке мы обсудим, что такое вложенность и как она используется в препроцессорах. Затем мы обсудим некоторые из его преимуществ и то, как его можно использовать в CSS.

Вот что мы рассмотрим:

  • Что такое вложение CSS?
  • Преимущества раскроя
  • Как вложить селекторы в CSS
  • Вложенность и специфичность CSS
  • Общие руководства по использованию раскроя

Что такое вложение CSS?

Возможно, вы знакомы с написанием CSS следующим образом:

 .заголовок {
  цвет фона: синий;
}
.заголовок р {
  размер шрифта: 16px;
}
.header p span:hover{
  цвет: зеленый
}

Рассмотрим другой способ написания тех же стилей с вложением CSS:

 .заголовок {
  цвет фона: синий;
  п {
    размер шрифта: 16px;
    охватывать {
      &: наведите {
        цвет: зеленый
      }
    }
  }
}

Этот синтаксис был возможен с препроцессорами CSS, такими как Sass и Less. Как видно из обоих приведенных выше примеров кода, вложение — это включение селектора внутрь другого селектора. Вложенность помогает группировать связанные стили и писать CSS во вложенной иерархии.

Если вы думаете, что это отличается, учтите, что вы делали это все вместе с HTML. Таким образом, вместо того, чтобы снова и снова писать один и тот же селектор для стилизации определенных дочерних элементов или псевдоселекторов, вы можете просто вложить их в один селектор.

Преимущества вложения

Из абзаца выше уже видны некоторые преимущества использования вложенности. Рассмотрим еще два:

  1. Написание более модульных и удобных таблиц стилей. Вместо того, чтобы иметь один и тот же селектор в нескольких местах в таблице стилей, вы можете разместить все стили, связанные с этим селектором, в одном месте. Это значительно ускорит разработку и отладку.
  2. Позволяет вкладывать медиа-запросы. Благодаря вложенности нет необходимости иметь отдельное правило медиа-запроса для селектора. Вы можете добавить это право там, где вы определили селектор

Теперь возникает вопрос: «Как мы можем использовать вложение CSS в нативном CSS?»

Как вложить селекторы в CSS

Вложение в нативном CSS почти такое же, как мы видели в примере выше. Однако в нативном коде мы должны начинать каждый вложенный селектор с синтаксиса «вложенного селектора», и , или мы используем правило @nest .

Если мы перепишем приведенный выше код CSS с собственным вложением CSS, мы получим следующее:

 .заголовок {
  цвет фона: синий;
  & п {
    размер шрифта: 16px;
    & охватывать {
      &: наведите {
        цвет: зеленый
      }
    }
  }
}

Как упоминалось ранее, и необходимы в начале каждого селектора, чтобы вложение было действительным. Мы можем думать о и как о ссылке на родительский селектор. Таким образом, если мы инвертируем приведенный выше стиль CSS и заменим каждые и их родительским селектором, мы вернемся к исходной структуре CSS.

Аналогично приведенному выше селектору типов, мы также можем вкладывать селекторы классов.

Вложенные классы CSS

Возьмем другой пример. Если мы хотим написать составные селекторы, подобные приведенному ниже, используя встроенное вложение CSS:

 h2. header {
  вес шрифта: 700
}

Делаем так:

 ч2 {
  &.заголовок {
    вес шрифта: 700
  }
}

Как мы видим, замена и родительским селектором h2 возвращает нам h2.header . Всякий раз, когда мы добавляем селектор (в данном случае селектор класса) к тому же элементу, мы должны игнорировать пробел между и и селектором.

Возьмем другой пример. Давайте перепишем следующие правила стиля, используя вложенные классы:

 .foo {цвет: #000000; }
.foo .bar {цвет: #fd2020; }
.foo .bar > .baz { цвет: #ffffff; }

Для первого вложенного селектора класса у нас будет:

 .foo {
  цвет: #000000;
  & .бар {
    цвет: #fd2020;
  }
}

И затем, добавление второго вложенного класса дает нам:

 .foo {
  цвет: #000000;
  & .бар {
    цвет: #fd2020;
    & > .баз {
      цвет: #ffffff;
    }
  }
}

Тот же метод применяется к вложенным условным правилам, таким как медиа-запросы. Взгляните на следующие вложенные правила:

 .заголовок {
  размер шрифта: 40px
  @media (максимальная ширина: 760 пикселей) {
    & {
      размер шрифта: 24px;
    }
  }
}

Мы видим, что заменив и родительским селектором .header , мы получим следующий эквивалент:

 .заголовок {
  размер шрифта: 40px;
}
 
@media (максимальная ширина: 760 пикселей) {
  .заголовок {
    размер шрифта: 24px;
  }
}

Как мы видим, вложение CSS помогает группировать похожие стили вместе.

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

Группировка селекторов CSS

Представьте, что у нас есть такая группа селекторов:

 #промежуток заголовка,
#заголовок а,
п размах,
п а {
  цвет: #0000ff;
}

Во-первых, с помощью функции CSS is() мы можем сделать правила стиля немного компактнее, например:

 :is(#header, p) диапазон,
:is(#header, p) a {
    цвет: #ff0000;
}

Затем, чтобы создать вложенные правила стиля, мы должны начинать каждый селектор с и . В этом случае мы будем иметь следующее:

 #заголовок, р {
    & span, & a {color: #ff0000; }
}

Нет ничего проще.

Правило

@nest

Хотя прямая вложенность с и может показаться идеальной, существуют некоторые допустимые селекторы вложенности, которые он не может обработать. Рассмотрим пример:

 .заголовок {
  цвет фона: белый;
  .темный & {
    цвет фона: синий;
 }
}

Описанное выше вложение допустимо для вложенных селекторов. Но прямое вложение в CSS с этим не справится. Вот где Приходит правило @nest .

Правило @nest позволяет сделать вложение более гибким в CSS. Таким образом, вместо того, чтобы располагать селектор вложенности только в начале вложенного селектора, правило @nest позволяет сделать вложенность менее ограниченной, если во вложенном селекторе есть селектор вложенности ( и ).

Приведенный выше пример можно исправить с помощью правила @nest :

 . заголовок {
  цвет фона: белый;
  @гнездо .dark & ​​{
    цвет фона: синий;
 }
}

Это эквивалентно:

 .заголовок {
  цвет фона: белый;
}
.темный .заголовок {
    цвет фона: синий;
}

Другой пример:

 .заголовок {
  цвет фона: белый;
  @гнездо: не (&) {
    цвет фона: синий;
  }
}

Это эквивалентно:

 .заголовок {
  цвет фона: белый;
}
:не(.заголовок) {
  цвет фона: синий;
}

Обратите внимание, что для того, чтобы правило @nest было действительным, селектор прямого вложения ( и ) должны присутствовать во вложенном селекторе, иначе он будет недействителен. Таким образом, приведенный ниже пример недействителен, поскольку отсутствует селектор вложенности:

.
 .заголовок {
  цвет фона: белый;
  @гнездо .dark {
    цвет фона: синий;
 }
}

Обратите внимание, CSS в настоящее время поддерживается не всеми браузерами, но вы можете использовать PostCSS для преобразования вашего вложенного CSS в действительный CSS, понятный браузерам.

Вложенность и специфичность CSS

В CSS специфичность — это набор правил, определяющих, какие стили применяются к элементу. Если два или более селектора применяются к одному и тому же элементу, применяется селектор с наибольшей специфичностью. Например, рассмотрим пример ниже:

 
  <ч2 />

  # заголовок {
    красный цвет;
  }
  .заголовок {
    цвет синий;
  }
  ч2 {
    цвет: зеленый;
  }

каскадов CSS, поэтому в идеале следует применять последний селектор, примененный в таблице стилей ( h2 ).
Однако цвет элемента h2 будет red , поскольку селектор id ( #header ) имеет более высокую специфичность. Для более подробного объяснения специфичности вы можете прочитать эту подробную статью о специфичности.

Какое отношение это имеет к вложению CSS? Давайте посмотрим, что происходит в браузере, когда мы используем вложение. Рассмотрим этот пример:

 #заголовок, р {
  & охватывать {
    красный цвет;
  }
}

Это эквивалентно:

 :is(#header, p) span { цвет: красный }

Селектор :is использует самую высокую специфичность среди селекторов для всех селекторов, поэтому будет сложно переопределить стили. Если у вас есть элемент p , вы хотите изменить цвет span , например, вот так:

 

  привет 


<стиль>
  #заголовок, п {
    & охватывать {
      красный цвет;
    }
  }
 .параграф {
    & охватывать {
      цвет: зеленый;
    }
  }

Цвет красный по-прежнему будет применяться, поскольку специфичность #header выше, чем у класса .paragraph .

Это важно, чтобы избежать использования очень сложных селекторов или использования !важно для перезаписи стилей. Далее давайте рассмотрим некоторые общие рекомендации, которым следует следовать при вложении.

Общие руководства по использованию раскроя

Избегайте чрезмерной вложенности

Поскольку вложение упрощает вложение стилей, у вас может возникнуть соблазн вложить селекторы слишком много. Рассмотрим пример ниже:

 основной {
  & раздел {
    цвет фона: красный;
    & ул {
        цвет фона: зеленый;
        & . список {
          размер шрифта: 16px;
          & .связь {
            цвет: розовый;
              &: наведите {
                цвет синий
              }
          }
        }
      }
  }
}

Это эквивалентно

 основной раздел {
  цвет фона: красный;
}
основной раздел ул {
  цвет фона: зеленый;
}
основной раздел ul .list{
  размер шрифта: 16px;
}
основной раздел ul .list .link{
  цвет: розовый;
}
основной раздел ul .list .link:hover{
  цвет синий;
}

Последний селектор имеет шесть уровней вложенности. Это может привести к множеству проблем со специфичностью, если вы когда-нибудь захотите переопределить стили. Как правило, сохраняйте вложенность только на три уровня в глубину. Вы можете использовать stylelint, чтобы держать это под контролем. Старайтесь максимально использовать классы с описательными именами.

Стили после вложенных селекторов игнорируются

Это следует помнить при использовании вложения. Рассмотрим этот пример:

 основной {
  & раздел {
    цвет фона: красный;
  }
  цвет: зеленый;
}

Цвет : зеленый будет игнорироваться, так как он находится после вложенного селектора. При вложенности CSS любые стили должны применяться перед вложенными селекторами. Это одно из различий между вложением CSS и вложением с другими препроцессорами.

Вывод

Nesting — интересная функция, которая скоро будет добавлена ​​в собственный CSS. В этой статье мы обсудили следующее:

  • Вложенность поможет сделать таблицы стилей модульными и более удобными в сопровождении. Это связано с тем, что при вложении все стили, связанные с селектором, дочерним/родительским селектором и даже медиа-запросами, могут быть вложены в одно и то же место
    • .
  • Как и когда можно использовать прямое размещение и правило @nest
  • Почему следует помнить о специфике при использовании вложенности и избегать чрезмерной вложенности

Для дальнейшего изучения вложения CSS вы можете обратиться к проекту W3C для модуля вложения CSS.

Ваш интерфейс загружает ЦП ваших пользователей?

Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования процессора на стороне клиента, использования памяти и многого другого для всех ваших пользователей в рабочей среде, попробуйте LogRocket.https://logrocket.com/signup/

LogRocket похож на DVR для Интернета. и мобильных приложений, записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически отображать все ошибки.

Модернизируйте способы отладки веб-приложений и мобильных приложений — начните мониторинг бесплатно.

html — Как ссылаться на вложенные классы с помощью CSS?

спросил

Изменено 2 месяца назад

Просмотрено 137 тысяч раз

Как при использовании CSS указать вложенный класс?

Вот моя HTML-разметка:

 

    <дел>
      <дел>
         
Складной
 
        <дел>
          <кнопка data-widget="collapse">
<дел>

Телефон: 0800 000 000

Интернет: http://www.example.com

Карта : пример адреса карты

Электронная почта: [email protected]