1
resposta

Por que .lista__link a e não somente lista__link?

Por que utilizar a tag âncora "a" depois do lista__link? Se eu utilizar apenas o lista__link já no deveria estilizar todos os "a"s?

Exemplo:

Ao invés de fazer assim:

.lista__link a {
    color: var(--branco-principal);
    margin-left: 1em;
    text-decoration: none;
    font-size: 16px;
}

Faria assim:

.lista__link {
    color: var(--branco-principal);
    margin-left: 1em;
    text-decoration: none;
    font-size: 16px;
}

Obs.: Eu estou perguntando, porque quando eu fiz eu utilizei sem o "a", e deu errado. Mas não sei o motivo.

1 resposta

Bom dia, Igor. A diferença entre usar .lista__link a e apenas .lista__link está na especificidade e no contexto em que o estilo está sendo aplicado.

  • .lista__link a Esse seletor se refere especificamente a elementos <a> que estão dentro de um elemento com a classe lista__link. Ou seja, ele estiliza apenas os elementos <a> que são descendentes de um elemento com a classe lista__link.

  • .lista__link Este seletor estiliza diretamente qualquer elemento que tenha a classe lista__link. Isso significa que, se a classe lista__link estiver aplicada em um elemento que não seja um <a>, esse estilo será aplicado a esse elemento.

O estilo não funcionou sem o a porque o seletor .lista__link aplica os estilos diretamente ao <li>, que é o elemento com a classe lista__link. No entanto, muitas propriedades CSS, como color e text-decoration, não são herdadas automaticamente pelos elementos filhos, como o <a>, nesse caso sendo necessário especificar os seletores ao aplicar os estilos.