CSS селектор потомков

Селектор потомков используется для выбора потомков, не зависимо от их уровня вложенности, внутри предка:

/* Выбор всех элементов <span>, которые являются потомками
   элемента <div> */
div span { background-color: yellow; }

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

Если читать селектор справа налево, то пробел можно перевести как находится внутри или который является потомком. Таким образом, div span можно прочитать как Любой элемент span, который является потомком элемента div.

Пример

div span { font-weight: bold; }

<div>
  <p>Жирным будет выделен <span>этот текст</span>
  и второй пункт списка.</p>
  
  <ul>
    <li>Первый пункт.</li>
    <li><span>Второй пункт.</span></li>
    <li>Третий пункт.</li>
  </ul>
</div>