Seletores CSS
Após um bom tempo sem postar, volto com um assunto já falado anteriormente: os seletores CSS. Já foi explicado nesse post o que são e para que servem, porém no post de hoje meu objetivo é apresentar formas avançadas, e de certo modo "interessantes", de utilizá-los.
Já sabemos que podemos ter uma tag, um ID e uma classe como seletores, agora aprenderemos os tipos de seletores que podemos ter ao utilizá-los em conjunto, que são:
- Seletor Universal
- Seletor de Tipo de Elemento
- Seletor Contextual
- Seletor de Elementos-filhos
- Seletor Adjacente
- Seletor de Classe
- Seletor de ID
- Agrupamento de Seletores
- Seletor de Atributo
- Pseudo-classes
- Pseudo-elementos
Seletor Universal
Este tipo de seletor é de compreensão básica e geralmente utilizado para o que chamamos de Reset de CSS (zerar os estilos pré-definidos pelos browsers), pois ele aplica a(s) mesma(s) regra(s) à todos os elementos HTML, isso mesmo, TODOS. Para criarmos uma regra com esse seletor, basta declará-la com * e definir suas propriedades e valores.
Exemplo:
Resultado:
Seletor de Tipo de Elemento
Trata-se da tag do elemento cuja regra deve ser aplicada, ou seja, aplica determinada formatação à todos os elementos que tenham a mesma marcação HTML.
Exemplo:
Resultado:
Seletor Contextual
Este seletor é utilizado quando queremos aplicar uma regra CSS à um elemento que esteja contido (dentro) de outro elemento, não importando se ele é descendente direto ou está contido dentro de outro elemento.
Para isto indicamos o elemento que queremos aplicar a regra precedido do elemento em que está contido, separado por espaço. Vejamos no exemplo:
Exemplo:
Resultado:
Seletor de Elementos-filhos
Este seletor é bem parecido com o contextual, porém ao invés da regra servir para todos elementos que estejam contidos, ela se aplica apenas aos descendentes diretos, ou seja, aos elementos que não estão contidos dentro de outros elementos. Para uma compreensão melhor, pense na seguinte analogia: Temos um pai (section), dois filhos (div e p) e um neto (p filho de div). Relacionando isso ao HTML: temos um p dentro de uma div, e estes junto com o p dentro de uma section. Como o p-filho está diretamente contido na section, terá a regra aplicada. Já o p-neto não, pois está contido em section mas não diretamente.
Entendi como o seletor funciona, mas como devo definí-lo em CSS? Simples, basta inserirmos o símbolo > entre o elemento pai e o elemento-filho.
Exemplo:
Resultado:
Seletor Adjacente
O seletor adjacente deve ser usado quando queremos aplicar determinada regra a um elemento que esteja diretamente após o elemento especificado. Para isso, usamos + entre os elementos.
Exemplo:
Resultado:
Seletor de Classe
Assim como o Seletor de Tipo de Elemento aplica regras à tag definida, o Seletor de Classe formata elementos que possuam uma classe. Na regra devemos informar o tipo de elemento seguido de . seguido da classe.
Exemplo:
Resultado:
Seletor de ID
Assim como o Seletor de Classe define regras a elementos que possuam uma classe, o Seletor de ID aplica regras aos elementos que tenham um ID. Na regra CSS deve ser definido o tipo de elemento seguido por #, e este seguido pelo ID
Obs.: Diferente da classe, um ID deve ser utilizado apenas uma única vez por página HTML.
Exemplo:
Resultado:
Agrupamento de Seletores
Até agora vimos regras sendo aplicadas a apenas um tipo de seletor, mas como definimos uma mesma regra para diferente tipos de elementos, classes e/ou IDs? Basta utilizarmos o agrupamento de seletores, inserindo ,(vírgula) entre os seletores que queremos aplicar a formatação.
Exemplo:
Resultado:
Seletor de Atributo
Este seletor é usado quando queremos aplicar uma regra à determinado elemento que tenha determinado atributo. Sua utilização tem níveis de complexidade, isto é, podemos simplesmente indicar o atributo do elemento, definir o atributo e seu valor, o atributo e seu valor dentro de uma lista separada por espaço, ou até mesmo o atributo . Vejamos estes níveis:
Atributo do elemento: Na regra CSS indicamos o elemento seguido de [nome do atributo]
Exemplo:
Resultado:
Atributo do elemento e seu valor: No CSS indicamos o elemento seguido de [nome do atributo="valor"]
Exemplo:
Resultado:
Atributo do elemento e seu valor dentro de uma lista separada por espaço: Indicamos o elemento seguido de [nome do atributo~="valor"]
Exemplo:
Resultado:
Atributo do elemento com valor idêntico ou de início igual ao da regra: No CSS definimos o elemento seguido de [nome do atributo|="valor ou início do valor"]
Obs.: O uso deste seletor é restrito ao atributo lang
Exemplo:
Resultado:
Pseudo-classes
Sabe aqueles efeitos de transição (mudança de cor, fonte, peso da fonte, etc.) que ocorrem ao passar o mouse ou clicar sobre links? Eles nada mais são do que pseudo-classes com formatação CSS.
E o que seriam essas pseudo-classes? São formas mais específicas de indicar o elemento que será formatado e estão divididas em dois grupos: Estruturais e Dinâmicas. Antes de saber a diferença entre esses dois grupos, deve-se notar que na regra CSS, as pseudo-classes são declaradas após o elemento seguido de :.
Estruturais: Selecionam determinado elemento dentro da estrutura do código-fonte, isto é, verificam a ordem hierárquica em que um elemento se encontra e aplica a formatação caso ele se aplique à regra. Dentro deste grupo nós temos as pseudo-classes: first-child e lang(val).
- first-child: Esta pseudo-classe verifica se o elemento é o primeiro descendente (primeiro-filho) e aplica a regra CSS.
Exemplo:
Resultado:
- lang(val): Verifica se o elemento tem o atributo lang e val(valor) igual ao da regra, caso sim, a mesma é aplicada.
Exemplo:
Resultado:
Dinâmicas: Ao invés de verificar a estrutura do elemento, elas verificam o estado dos elementos. Neste grupo nós temos as pseudo-classes: link, visited, active, hover e focus.
- link: Utilizada no elemento <a>, aplica formatação aos links/âncoras que não foram visitados.
- visited: Também utilizada no elemento <a>, aplica formatação aos links/âncoras que já foram visitados.
- active: Aplica formatação ao elemento ao ser ativado pelo usuário, por exemplo um clique num link ou botão de formulário.
- hover: Aplica formatação ao elemento quando é passado o mouse sobre o mesmo.
- focus: Aplica formatação ao elemento quando o mesmo está em foco, por exemplo quando clicamos num campo de um formulário, ou quando usamos a tecla tab para navegar entre os itens.
Veja no exemplo abaixo o comportamento dessas pseudo-classes num mesmo hiperlink:
Resultado:
Caso o link já tenha sido visitado, basta limpar o cache do navegador para ver os efeitos novamente. Para visualizar o efeito da pseudo-classe focus, utilize a tecla tab.
Pseudo-elementos
Os pseudo-elementos funcionam de forma semelhante às pseudo-classes, porém a formatação não se aplica a todo o elemento, mas em partes dele. São pseudo-elementos: first-line, first-letter, before e after, todos são declarados em CSS após o elemento seguido de :.
- first-line: A regra definida é aplicada somente à primeira linha do elemento.
Exemplo:
Resultado:
- first-letter: A regra definida é aplicada somente à primeira letra do elemento.
Exemplo:
Resultado:
- before: A regra insere conteúdo antes do elemento.
- after: A regra insere conteúdo após o elemento.
Exemplo usando before e after:
Resultado:
O objetivo deste post foi apresentar de forma mais abrangente o que são os seletores CSS, assim como demonstrar quando, como e para quê devemos utilizá-los, de forma que as regras CSS sejam mais específicas, ocupem menos linhas, além de trazerem mais semântica para nossas páginas HTML.
Espero que esse objetivo tenha sido atingido e qualquer dúvida/informação adicional, comente logo abaixo. Obrigado pela atenção e pela paciência de ter lido até aqui! :)
Comentários
Postar um comentário