Seletores Descendentes

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

todos os elementos HTML têm um relacionamento de pai e filho gerando alinhamento entre eles, como por exemplo nesse Código onde o pai é o <body> e o <p> e a <div> são filhos dele, <ul> é filho da <div> e os <li> são filhos do <ul>

HTML

<body>
    <p>Minha lista</p>
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

nesse caso podemos tirar proveito dessa hierarquia para gerar maior especificada no CSS, por exemplo nesse css, o seletor irá aplicar apenas para os elementos ul que tenham div como pai, mesmo que tenham outros ul dentro da sua pagina ele irá aplicar especificamente para esse cenário

div ul { ... }

e isso pode ficar ainda mais especifico onde nesse codigo irá aplicar apenas para <li> que tiverem dentro de um <ul> que esteja dentro de uma <div>

div ul li { ... }

você pode utilizar diferentes tipos de seletores para fazer a seleção descendente ou até misturar eles, por exempo, nesse caso ira aplicar apenas para <ul> que tiverem o elemento pai com a classe div-lista.

HTML

<body>
    <p>Minha lista</p>
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="div-lista">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

CSS

.div-lista ul { ... }

Exercício 1: Estilizando Elementos Aninhados

Dado o seguinte HTML aninhado:

<body>
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

Crie regras CSS para estilizar os elementos da lista (<ul>) que estejam dentro de uma <div>. Os alunos devem:

Definir a cor de fundo da lista como cinza (#808080).
Definir a cor do texto dos itens da lista como branco (#FFFFFF).
Adicionar margem interna de 10 pixels aos itens da lista.

É preciso usar seletor descendente para atingir esse resultado.

Exercício 2: Mais Especificidade com Seletores Descendentes

Dado o seguinte HTML com duas <div>:

<body>
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="div-lista">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

Crie regras CSS para estilizar as listas que estejam dentro das <div> com a classe “div-lista”. Os alunos devem:

Definir a cor de fundo das listas dentro das <div> com a classe “div-lista” como azul (#0000FF).
Definir a cor do texto dos itens da lista como amarelo (#FFFF00).

Utilize um seletor descendente para atingir esse resultado e garantir que apenas as listas dentro das <div> com a classe “div-lista” sejam estilizadas.

Curso de CSS 3

Participantes 867

Seletores Descendentes

Roger.Santos 03/01/2023

Exercício 1: Estilizando Elementos Aninhados

Exercício 2: Mais Especificidade com Seletores Descendentes