Solucionado
Estou com um problema ao fazer algo similar do que mostrado no fim do vídeo. Tenho um elemento li, que dentro tem um span. fiz
li span {
background: #FFF;
color: red;
} <ul>
<li><span>teste<span>Bla</li>
...Imaginava que apenas teste ficaria vermelho com fundo branco, entretanto, Bla também fica com as mesmas características. Estou deixando passar algum detalhe?
Ambiente: Firefox 74.0 em Mac OSX 10.14.6 (uso Emacs para editar ;-) )
Oi, Daniel, tudo bem?
A palavra Bla também pegará a cor vermelha já que você no css colocou li span, então, o css vai procurar quais elementos entram dentro da li e da span e vai estilizar com as propriedades. Esse é o efeito cascata do CSS. Se você quiser que somente a palavra teste seja estilizada, utilize somente no css a tag span, assim:
span {
background: #FFF;
color: red;
}Espero ter te ajudado!
Mas nesse caso Bla não faz parte do span. Isso que me deixa mais confuso.
Falando em termos de XPath, li span{} não é equivalente a um seletor /li/span, que deixaria intocado outros spans e outros lis?
Visto que o browser claramente concorda contigo, só quero ver onde meu entendimento tomou a curva errada.
Oi, Daniel!
Mas é que Bla faz parte de li e você está estilizando as tag span que também estão contidas em li, ou seja, é o efeito cascata que é o estabelecimento de uma prioridade para aplicação da regra de estilo a um elemento. Nesse caso, quem é o elemento que está determinando a estilização com prioridade é o li. Sacou a ideia?
Ah, agora que eu vi - não fechei o span! Logo eu, que tenho tanto zelo por xHTML! XD Que vergonha! Muito obrigado!