Селектор потомка

Цепочка перечисленных через пробел селекторов обозначает вложенность от родительских элементов к потомку. Это позволяет управлять стилями вложенных элементов.

🤖 Такие вложенные селекторы используются, если нужно задать разные стили для элемента на всей странице и для элемента внутри определённого блока.

Скажем, цвет текста в абзацах карточки новостей должен отличаться от текста на всей странице. При этом все остальные стили для абзацев одинаковые.

        
          
          <div class="wrapper">  <!-- Абзац текста на странице -->  <p class="text">Если вам скажут...</p>  <div class="news-card">    <h2 class="news-card__title">Все новости должны быть такими</h2>    <!-- Абзац текста внутри новостной карточки -->    <p class="text news-card__text">      У пингвинов, живущих в Московском зоопарке...    </p></div></div>
          <div class="wrapper">
  <!-- Абзац текста на странице -->
  <p class="text">Если вам скажут...</p>

  <div class="news-card">
    <h2 class="news-card__title">Все новости должны быть такими</h2>
    <!-- Абзац текста внутри новостной карточки -->
    <p class="text news-card__text">
      У пингвинов, живущих в Московском зоопарке...
    </p>
</div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Стили текста для всей страницы:

        
          
          .text {  color: #ffffff;  line-height: 1.4;}
          .text {
  color: #ffffff;
  line-height: 1.4;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Стили для текста, вложенного в блок .news-card:

        
          
          .news-card .text {  color: #000000;}
          .news-card .text {
  color: #000000;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Часто пробел не имеет особого значения. Но не в CSS. При написании стилей пробел между селекторами является указателем взаимоотношений между элементами.

При чтении вложенного селектора первая часть указывает на родительский элемент, а последующие — на вложенные.

Подробнее можно прочитать в статье «Специфичность».

Всё просто! Берём один селектор. Берём второй селектор. Соединяем их при помощи пробела. Profit! 😉

💡 Кроме пробела есть разные комбинаторы для соединения двух селекторов: +, ~, >. Подробнее о них можно почитать в статье «Комбинированные селекторы». Но чаще всего вы будете пользоваться именно пробелом.

💡 Вложенный селектор имеет больший вес, чем селектор, состоящий из одного класса. Из-за этого могут возникнуть сложности с переопределением стилей.

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

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Можно перечислять сколько угодно классов, спускаясь ниже и ниже по дереву вложенности элементов, но селекторы с более чем двумя составляющими сложно читать. И если нужен более сложный селектор, то это повод пересмотреть HTML-разметку и проверить её целесообразность.