3
respostas

NAV A

Qual a diferença de se utilizar nav a e nav li?

Fiquei um pouco confusa sobre o a da tag

Obrigada!

3 respostas

Isso depende da estrutura do html, não sei como está no projeto em questão, mas segue um ex:

<nav>
    <li>
        <a>item</a>
    </li>
</nav>

Caso queira alterar a cor do texto "item" ou tirar seu sublinhado, deve usar nav a, pois é mais específico que o li e tem características próprias, como cor e sublinhado que li não tem...

 // não funciona... continua o azul padrão do link (a) e seu sublinhado
 nav li { color: red }

Se quero alterar a cor por ex, deve usar o seguinte:

 nav a { color: green }

Então, depende de como está o html e do que se deseja alcançar.

Pelo que entendi, quando colocamos:

nav a { estamos acessando apenas o que esta dentro da tag a"o link que colocamos". }

Se for:

nav ul { acessamos todo o conteúdo dentro de ul, assim o que modificarmos aqui, vai valer para tudo dentro dele. Mesmo que tenhamos outra tag. }

Fala Pessoal! Tudo bom?

Seletores CSS podem ser complicados realmente.

Quando utilizamos:

nav a{
    text-decoration:none;
}

Estamos selecionando todos as tags <a> que estejam contidas dentro de um <nav> no nosso documento HTML.

Quando utilizamos:

nav ul{
    color:green;
}

Selecionamos as tags <ul> contidas em <nav>'s.

Caso sua intenção seja remover a decoração padrão dos links (azul e sublinhado), existem algumas formas de fazer.

A primeira é como o nosso amigo Leandro mencionou, podemos selecionar os links contidos em navs e então modificá-los especificamente:

nav a{
    text-decoration: none;
    color:black;
}

Existem uma outra forma, que é utilizando a cor do primeiro pai:

nav ul{
    color: black;
}
nav a{
    text-decoration: none;
    color: inherit;
}

Dessa forma definimos que os links devem seguir o padrão definido pela lista. É possível também trocar o seletor de ul para li

nav li{
    css aqui.
}

Ainda podemos brincar com o estado do link utilizando:

a:hover{
    color:green;
}
a:visited{
    color:red;
}

sendo o hover para quando o mouse estiver em cima do link e o visited para quando o link já tiver sido visitado

Espero ter ajudado!

Abraços e bom estudo!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software