6 Seletores CSS Que Você Precisa Memorizar
Neste artigo vamos te mostrar 6 seletores CSS que você precisa memorizar e dominar para inserir em seus projetos e deixa-los ainda mais profissionais.
Ou seja, é extremamente importante você entender o que cada seletor faz.
Dessa forma você pode se destacar no mercado de trabalho pois muitas pessoas usam esses seletores da maneira e no momento errado.
Portanto, recomendo ler esse artigo até o final para entender cada detalhe desses seletores CSS.
Confira neste artigo:
:visited
Primeiramente temos o seletor CSS :visited que é muito simples de entender.
Como o próprio nome sugere, ele é utilizado para definir quando um link já foi visitado.
Por exemplo, quando o link aparece pela primeira vez a cor dele é azul, quando clicamos nele, a próxima vez que for apresentado podemos definir uma cor como o roxo.
Exemplo de código CSS:
a:visited {
color: purple;
}:active
Temos também o seletor :active que basicamente é utilizado quando ativamos o elemento.
Por exemplo, quando clicamos em um link e não soltamos o botão do mouse.
Veja também: Vale a pena investir no curso de desenvolvimento web do OneBitCode?
Neste caso podemos definir uma cor que será apresentado no momento que essa ação for executada.
Exemplo de código CSS
a:active {
color: #ff0043;
}:hover
O seletor CSS :hover é bastante utilizado em páginas que tem muita interação visual com o usuário.
Ele basicamente realiza alguma ação visual quando passamos o mouse em cima do elemento.
Por exemplo, podemos utilizar essa funcionalidade para mudar a cor de um link quando simplesmente passamos o cursor do mouse em cima.
Exemplo de código CSS:
:link:hover {
outline: dotted red;
}Veja também: Vale a pena investir no curso de desenvolvimento web do OneBitCode?
:focus
Já o seletor CSS :focus é muito utilizado em campos de texto.
Quando clicamos em cima de um campo de texto para escrever, o elemento está ganhando foco.
Ou seja, podemos alterar a cor para sinalizar em qual elemento o foco está ativo.
Exemplo de código CSS
.name:focus {
color: red;
}:enabled
Temos também o seletor CSS :enabled que representa qualquer elemento que esteja ativado.
- Selecionado;
- Clicado;
- Digitado;
- Etc.
Vale a pena utilizar esse seletor nos seus projetos para melhorar e facilitar a usabilidade.
Exemplo de código CSS
input:enabled {
color: blue;
}:disabled
Por fim, temos o seletor CSS :disabled que basicamente representa qualquer elemento desativado que não pode ser ativado.
- Selecionado;
- Clicado;
- Digitado;
- Etc.
Exemplo de código CSS
input:disabled {
background: #ccc;
}Conclusão: Seletores CSS
Em conclusão, vimos nesse artigo diversos tipos de seletores CSS para que você consiga se destacar no mercado de trabalho.
Clique no botão abaixo para acessar mais de 1400 cursos completos e com certificado válido.
ACESSAR CURSOS COM CERTIFICADOInvista em você e conquiste uma excelente carreira profissional na área da tecnologia.
Enfim, espero que tenha gostado deste conteúdo pois preparamos ele para realmente te ajudar em seus estudos sobre desenvolvimento de software.
Eu vou ficando por aqui…
Até a próxima e um forte abraço!
Artigos Relacionados
Sobre o Autor
DICA EXTRA: Algumas pessoas estão me perguntando qual é o curso que recomendo para quem deseja aprender programação, mesmo sem ter qualquer conhecimento sobre o assunto. Minha recomendação, tanto para quem está iniciando, como para quem já possui mais experiência, é essa AQUI...
0 Comentários