Почему у тега p не работает hover для дочернего элемента?

Question

[Елена]

Почему вот так работает

<div class="a">Lorem<h3 class="b">Lorem ipsum</h3>
</div>

.a:hover .b {
  color: #fff;
}

а вот так нет

<p class="a">Lorem<h3 class="b">Lorem ipsum</h3>
</p>

Comments

[Антон Литвиненко]

А вообще валидно вставлять заголовок внутрь параграфа?

[lukman_q]

наверное из за того что родитель блочный элемент

[Елена]

Антон Литвиненко, да тут не в заголовке дело. Даже если заменить на параграф, то тоже ничего не выходит

[Елена]

lukman_q, так если параграфу задать блок дисплей, ничего не меняется

[lrsvolk]

Это не валидный html, браузер это понимает и пытается "помочь", поэтому распарсит его так (см.скрин).

[Елена]

lrsvolk, спасибо. Сейчас только это заметила)

Answer 1

[v3shin]

Браузер сопротивляется вставке h3 в p и преждевременно закрывает p: посмотрите в inspector'е. Лучше используйте другой тег вместо h3.

Comments

[Елена]

v3shin спасибо)