2
respostas

Alternativa do exercício 6 do módulo de seletores avançados não funcionou.

No tópico do 6 do módulo de seletores avançados onde pede para estilizar apenas os elementos da lista sem mexer nos elementos da sublista é dado que alternativa correta é a letra C (ul > li). No entanto eu testei o exemplo os elementos da lista interna também foi estilizado.

<ul>
    <li>Item da lista
    <li>
        <ol>
            <li>Item da sublista
            <li>Item da sublista
        </ol>
    <li>Item da lista
    <li>Item da lista
</ul>

<style>
    ul > li {
        color: #930E0E;
        font-size: 25px;
        font-weight: bold;
    }
</style>

Testamos todas as demais alternativas e nenhuma delas estilizou apenas os elementos da lista. Nesse caso creio que o correto seria a alternativa A. Ou será que há algum erro com meu código?

2 respostas

Olá João Paulo, tudo certo?

Não sou nenhum especialista em html e css, mas pelo que me parece seu código está correto, porém quando o navegador for interpretar este html ele irá colocar as tags de fechamento e ficará deste jeito:

<ul>
    <li>Item da lista</li>
    <li>
        <ol>
            <li>Item da sublista</li>
            <li>Item da sublista</li>
        </ol>
    </li>
    <li>Item da lista</li>
    <li>Item da lista</li>
</ul>

Perceba que a lista ordenada está dentro de uma das linhas da lista não ordenada então ela acaba sendo estilizada com os estilos definidos em ul > li.

As tags de fechamento eu esqueci de colocar aqui (no arquivo fonte elas estão lá) mas sua observação de fato está correta. Eu retirei lista ordenada (ol) da dentro da lista não ordenada (ul) e a estilização funcionou como deveria, isto é, apenas nos elementos da lista principal.

<ul>
    <li>Item da lista</li>
    <ol>
        <li>Item da sublista</li>
        <li>Item da sublista</li>
    </ol> 
    <li>Item da lista</li>
    <li>Item da lista</li>
</ul>

<style>
    ul > li {
        color: #930E0E;
        font-size: 25px;
        font-weight: bold;
    }
</style>

No entanto, no exemplo dado no exercício (código a seguir) a lista ordenada está dentro do elemento li e dessa forma a estilização da alternativa C não funciona como deveria. Creio que o instrutor possa ter se equivocado na hora de escrever o código d o exemplo.

Código do exemplo dado no exercício:

<ul>
    <li>Item da lista
    <li>
        <ol>
            <li>Item da sublista
            <li>Item da sublista
        </ol>
    <li>Item da lista
    <li>Item da lista
</ul>