Tabela para referência em seletores de CSS

0
17

Você saca sobre CSS? Neste artigo vamos falar um pouco sobre seletores de CSS, e para facilitar seus testes, use o CSS Selector Test do W3Schools.

Para deixar a explicação muito mais leve e explicativa vamos abordar uma tabela dividida em 3 partes: Seletores, Exemplo e a Descrição de cada um deles, veja na tabela a seguir:

SeletorExemploDescrição
.class.introSeleciona todos os elementos com class=”intro”
#id#firstnameSeleciona o elemento com id=”firstname”
**Seleciona todos os elementos
elementopSeleciona todos <p>
elemento, elementodiv, pSeleciona todos <div> e todos elementos <p>
elemento elementodiv pSeleciona todos elementos <p> dentro de elementos <div>
elemento > elementodiv > pSeleciona todos <p> onde o pai é um elemento <div>
elemento+elementodiv + pSeleciona todos <p> que estão imediatamente depois de um elemento <div>
elemento1 ~ elemento2p ~ ulSeleciona todo elemento <ul> que precede um elemento <p>
[attribute][target]Seleciona todos os elementos com um atributo target
[attribute=value][target=_blank]Seleciona todos os elementos com target=”_blank”
[attribute~=value][title~=flower]Seleciona todos os elementos com um atributo title contendo a palavra “flower”
[attribute|=value][lang|=pt-br]Seleciona todos os elementos com um atributo lang, cujo o atributo valor comece com “pt-br”
[attribute^=value]a[href^=”https”]Seleciona todo elemento <a> que tem um atributo href com o valor começando com “https”
[attribute$=value]a[href$=”.pdf”]Seleciona todo elemento <a> que tem um atributo href com o valor termina com “.pdf”
[attribute*=value]a[href*=”tableless”]Seleciona todo elemento <a> que tem um atributo href com o valor contém “tableless”
:activea:activeSeleciona o link ativo
::afterp::afterInsere conteúdo depois de cada elemento <p>
::beforep::beforeInsere conteúdo antes de cada elemento <p>
:checkedinput:checkedSeleciona todo elemento <input> checked
:defaultinput:defaultSeleciona os <input> padrão
:disabledinput:disabledSeleciona todo <input> desabilitado
:emptyp:emptySeleciona todo elemento <p> que não tem filhos, incluindo texto
:enabledinput:enabledSeleciona todo <input> habilitado
:first-childp:first-childSeleciona todo elemento <p> que é o primeiro filho do seu pai
::first-letterp::first-letterSeleciona a primeira letra de todo elemento <p>
::first-linep::first-lineSeleciona a primeira linha de todo elemento <p>
ype.asp”>:first-of-typep:first-of-typeSeleciona todo elemento <p> que é o primeiro filho do seu pai
:focusinput:focusSeleciona o <input> que tem focus
:hovera:hoverSeleciona links quando o mouse passa por cima
sp”>:in-rangeinput:in-rangeSeleciona o elemento <input> com o atributo value dentro de um range especificado
:indeterminateinput:indeterminateSeleciona o elemento <input> tem um estado indeterminado
:invalidinput:invalidSeleciona todos <input> elementos com um valor inválido
:lang(language)p:lang(pt-br)Seleciona todo elemento <p> com a atributo lang igual a “pt-br”
sp”>:last-childp:last-childSeleciona todo elemento <p> que é o último filho de seu pai
ype.asp”>:last-of-typep:last-of-typeSeleciona todo elemento <p> que é o último elemento do tipo <p> do seu pai
:linka:linkSeleciona todos links não visitados
:not(Seletor):not(p)Seleciona todo elemento elemento que não é um elemento <p>
sp”>:nth-child(n)p:nth-child(2)Seleciona todo elemento <p> que é o segundo filho do seu pai
hild.asp”>:nth-last-child(n)p:nth-last-child(2)Seleciona todo elemento <p> que é o segundo filho do seu pai, contando com o último filho
f-type.asp”>:nth-last-of-type(n)p:nth-last-of-type(2)Seleciona todo elemento <p> que é o segundo <p> of its parent, contando com o último filho
ype.asp”>:nth-of-type(n)p:nth-of-type(2)Seleciona todo elemento <p> que é o segundo <p> do seu pai
ype.asp”>:only-of-typep:only-of-typeSeleciona todo elemento <p> that is the only <p> do seu pai
sp”>:only-childp:only-childSeleciona todo elemento <p> que é o único filho do seu pai
:optionalinput:optionalSeleciona o elemento <input> com sem o atributo “required”
ange.asp”>:out-of-rangeinput:out-of-rangeSeleciona o elemento <input> com o atributo value fora do range especificado
::placeholderinput::placeholderSeleciona o elemento <input> com texto placeholder
sp”>:read-onlyinput:read-onlySeleciona o elemento <input> com o atributo “readonly” especificado
sp”>:read-writeinput:read-writeSeleciona o elemento <input> com o atributo “readonly” não especificado
:requiredinput:requiredSeleciona o elemento <input> com the “required” atributo especificado
:root:rootSeleciona o elemento root
::selection::selectionSeleciona a porção de um elemento que está selecionado pelo usuário
:target#news:targetSeleciona o elemento atual ativo #news (clicado pelo usuário na URL contendo o nome ancora)
:validinput:validSeleciona todos <input> elementos com um valor válido
:visiteda:visitedSeleciona todos links já visitados

Agora, utilize cada um destes em seus projetos para testes e entenda as suas definições. Front-end em seu aspecto para desenvolver projetos é um dos pilares mais importante para interação e impressões iniciais do usuário com qualquer aplicação.

Gostou deste conteúdo? Deixe o seu comentário.

Até a próxima!

Deixe o seu melhor comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.