Qual a diferença de se utilizar nav a e nav li?
Fiquei um pouco confusa sobre o a da tag
Obrigada!
Qual a diferença de se utilizar nav a e nav li?
Fiquei um pouco confusa sobre o a da tag
Obrigada!
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!