Os 30 selectores CSS que você deve memorizar

aprender CSS: O Guia Completo

construímos um guia completo para o ajudar a aprender CSS, quer esteja apenas a começar com o básico ou queira explorar CSS mais avançados.Seletores CSS

então você aprendeu a base id, class, e descendant seletores-e então chamou-lhe um dia? Em caso afirmativo, está a perder um enorme nível de flexibilidade. Você deve a si mesmo para commit estes selectores CSS e CSS3 avançados para a memória.

Selectores Básicos

1. *

* { margin: 0; padding: 0;}

vamos acabar com os óbvios, para os principiantes, antes de avançarmos para os selectores mais avançados.

o símbolo da estrela visará cada elemento da página. Muitos desenvolvedores irão usar este truque para zero os margins e padding. Embora isto seja certamente bom para testes rápidos, eu aconselharia você nunca usar isso em código de produção. Ele adiciona muito peso no navegador, e é desnecessário.

o * também pode ser utilizado com selectores para crianças.

#container * { border: 1px solid black;}

isto visará cada elemento que é uma criança do #container div. Mais uma vez, tente não usar esta técnica muito, se alguma vez.

2. #X

#container { width: 960px; margin: auto;}

prefixar o símbolo de hash para um selector permite-nos atingir o alvo por id. Este é facilmente o uso mais comum; no entanto, seja cauteloso ao usar id seletores.

pergunte a si mesmo: preciso absolutamente de aplicar um id a este elemento para o atingir?

id os selectores são rígidos e não permitem a reutilização. Se possível, primeiro tente usar um nome de tag, um dos novos elementos HTML5, ou mesmo uma pseudo-classe.

3. .X

.error { color: red;}

este é um selector class. A diferença entre ids e classes é que, com este último, você pode atingir vários elementos. Use class es quando quiser que o seu estilo se aplique a um grupo de elementos. Alternativamente, use id s para encontrar uma agulha num palheiro, e estilo apenas esse elemento específico.

4. X

a { color: red; }ul { margin-left: 0; }

e se quiser apontar todos os elementos numa página, de acordo com os seus type, em vez de um nome id ou class? Mantenha-o simples, e use um selector de tipo. Se precisar de apontar para todas as listas não ordenadas, use ul {}.

demonstração ao vivo de selectores Básicos

selectores combinadores

5. X Y

li a { text-decoration: none;}

o próximo selector mais comum é o selector descendant. Quando você precisa ser mais específico com seus seletores, você usa estes. Por exemplo, e se, em vez de visar todas as marcas de âncora, você só precisa atingir as âncoras que estão dentro de uma lista não ordenada? Isto é especificamente quando se usa um selector descendente.

Pro-tip: se o seu selector se parece com X Y Z A B.error, está a fazer mal. Pergunte – se sempre se é absolutamente necessário aplicar todo esse peso.

6. X + Y

ul + p { color: red;}

este é referido como um selector adjacente. Ele selecionará apenas o elemento que é imediatamente precedido pelo elemento anterior. Neste caso, apenas o primeiro parágrafo após cada ul terá o texto vermelho.

7. X > Y

div#container > ul { border: 1px solid black;}

a diferença entre o padrão X Y e X > Y é que este último só seleccionará crianças directas. Por exemplo, considere a seguinte marcação.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

um selector de #container > ul visará apenas os uls que são filhos directos dos div com um id de container. Não visará, por exemplo, o ul que é filho do primeiro li.

por esta razão, existem benefícios de desempenho ao utilizar o combinador de crianças. Na verdade, é recomendado particularmente quando se trabalha com motores de seletor CSS baseados em JavaScript.

8. X ~ Y

ul ~ p { color: red;}

este combinador irmão é semelhante a X + Y, mas é menos rigoroso. Enquanto um seletor adjacente (ul + p) selecionará apenas o primeiro elemento que é imediatamente precedido pelo seletor anterior, este é mais generalizado. Ele selecionará, referindo-se ao nosso exemplo acima, quaisquer elementos p, desde que sigam um ul.

demonstração ao vivo de selectores de combinadores

selectores de atributos

9. X

a { color: green;}

referido como um selector de atributos, no nosso exemplo acima, isto irá apenas seleccionar as marcas de âncora que têm um atributo title. Etiquetas de âncora que não irão receber este estilo em particular. Mas e se precisares de ser mais específico? Veja o próximo exemplo!

10. X

a { color: #83b348; /* Envato green */}

o excerto acima irá estilo Todas as marcas de fixação que se ligam a https://code.tutsplus.com; vão receber a nossa marca verde. Todas as outras marcas de âncora não serão afectadas.

Note que estamos a embrulhar o valor entre aspas. Lembre-se também de fazer isso ao usar um motor de seletor de CSS JavaScript. Quando possível, use sempre seletores CSS3 sobre métodos não oficiais.

isto funciona bem, embora seja um pouco rígido. E se o link realmente direciona para Envato Tuts+, mas talvez o caminho é code.tutsplus.com em vez da URL completa? Nesses casos, podemos usar um pouco da sintaxe das expressões regulares.

11. X

a { color: #83b348; /* Envato green */}

lá vamos nós; isso é o que precisamos. A estrela designa que o valor do processo deve aparecer algures no valor do atributo. Por ali, isto cobre tutsplus.com, code.tutsplus.com, e mesmo webdesign.tutsplus.com.

tenha em mente que esta é uma declaração ampla. E se a marca de âncora estiver ligada a algum site não-Envato com o texto tutsplus no URL? Quando você precisa ser mais específico, use ^ e $, para referenciar o início e o fim de uma cadeia, respectivamente.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Ever wonder how some websites are able to display a little icon next to the links which are external? Tenho certeza que você já viu isso antes; eles são lembranças agradáveis que o link vai direcioná-lo para um site totalmente diferente.

esta é uma cinch com o símbolo de quilates. É mais comumente usado em expressões regulares para designar o início de uma string. Se quisermos atingir todas as marcas de âncora que tenham um href que começa com http, poderíamos usar um selector semelhante ao excerto mostrado acima.

Notice that we’re not searching for https://; that’s unnecessary, and doesn’t account for the URLs that begin with https://.

agora, e se quiséssemos em vez disso estilar todas as âncoras que ligam a, digamos, uma foto? Nesses casos, vamos procurar o fim do texto.

13. X

a { color: red;}

mais uma vez, usamos um símbolo de Expressões Regulares, $, para se referir ao fim de uma cadeia de caracteres. Neste caso, estamos à procura de todas as âncoras que ligam a uma imagem-ou pelo menos uma URL que termina com .jpg. Tenha em mente que isso não vai capturar imagens GIF e PNG.

14. X

a { color: red;}

como compensamos todos os vários tipos de imagem? Bem, podemos criar vários selectores, tais como:Mas isso é uma dor, e é ineficiente. Outra solução possível é usar atributos personalizados. E se adicionarmos o nosso próprio atributo data-filetype a cada âncora que se liga a uma imagem?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

então, com esse gancho no lugar, podemos usar um selector de atributos padrão para atingir apenas essas âncoras.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

aqui está um especial que vai impressionar os seus amigos. Não há muita gente que saiba deste truque. O símbolo tilde (~) permite-nos atingir um atributo que tem uma lista de valores separada por espaços.

indo junto com o nosso atributo personalizado do número 15, acima, nós poderíamos criar um atributo data-info, que pode receber uma lista separada por espaço de qualquer coisa que precisamos fazer nota. Neste caso, vamos tomar nota de links externos e links para imagens—apenas para o exemplo.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

com essa marcação no lugar, agora podemos atingir qualquer marca que tenha qualquer um desses valores, usando o truque do seletor de atributos ~.Muito elegante, não é?

Demo ao vivo dos selectores dos atributos

Pseudo selectores

16. X: visitado e X:ligação

a:link { color: red; }a:visited { color: purple; }

usamos a pseudo-classe :link para atingir todas as marcas de fixação que ainda não foram clicadas.

alternativamente, também temos a :visited pseudo classe, que, como seria de esperar, nos permite aplicar estilo específico a apenas as etiquetas de âncora na página que foram clicadas, ou “visitadas”.

17. X: assinalado

input:checked { border: 1px solid black;}

esta pseudo classe visará apenas um elemento de interface do utilizador que tenha sido assinalado-como um botão de rádio ou uma opção. É tão simples quanto isso.

18. X: depois de

as before e after pseudo classes são grandes. Todos os dias, ao que parece, as pessoas encontram formas novas e criativas de As utilizar eficazmente. Eles simplesmente geram conteúdo em torno do elemento selecionado.

muitos foram introduzidos a estas classes pela primeira vez quando encontraram o hack do clear-fix.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

este hack usa a pseudo classe :after para adicionar um espaço após o elemento, e depois limpá-lo. É um excelente truque para ter em seu saco de ferramentas, particularmente nos casos em que o método overflow: hidden; não é possível.

para outro uso criativo disto, consulte a minha dica rápida sobre a criação de sombras.

de acordo com a especificação de selectores CSS3, você deve tecnicamente usar a sintaxe pseudo elemento de dois colões ::. No entanto, para permanecer compatível, o usuário-agent irá aceitar um único uso de dois pontos também.

19. X: hover

div:hover { background: #e3e3e3;}

Oh come on. Conheces esta. O termo oficial para isso é”user action pseudo class”. Parece confuso, mas realmente não é. deseja aplicar um estilo específico quando um utilizador paira sobre um elemento? Isto vai acabar com o trabalho!

tenha em mente que as versões mais antigas do Internet Explorer não respondem quando a classe pseudo é aplicada a qualquer outra coisa que não uma etiqueta âncora.

usará mais frequentemente este selector ao aplicar, por exemplo, um border-bottom às marcas de fixação, quando pairou por cima.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; parece melhor que text-decoration: underline;.

20. X: não (selector)

div:not(#container) { color: blue;}

A pseudo classe de negação é particularmente útil. Digamos que eu quero selecionar todos divs, exceto aquele que tem um id container. O trecho acima irá lidar com essa tarefa perfeitamente.

ou, se eu quisesse seleccionar todos os elementos (não aconselhados) excepto as etiquetas de parágrafo, poderíamos fazer:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

we can use pseudo elements (designated by ::) to style fragments of an element, such as the first line or the first letter. Tenha em mente que estes devem ser aplicados aos elementos de nível de bloco, a fim de produzir efeito.

um pseudo-elemento é composto por dois cólons: ::

Alvo a Primeira Letra de um Parágrafo

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Este trecho é uma abstração que vai encontrar todos os parágrafos na página e, em seguida, sub-alvo apenas a primeira letra do elemento.

isto é mais frequentemente usado para criar estilo de jornal para a primeira letra de um artigo.

visar a primeira linha de um parágrafo

p::first-line { font-weight: bold; font-size: 1.2em;}

Similarmente, o pseudo elemento ::first-line irá, como esperado, estilo apenas a primeira linha do elemento.

” para compatibilidade com as folhas de estilo existentes, os agentes de Utilizador devem também aceitar a notação anterior de um ponto Para pseudo-elementos introduzidos nos níveis 1 e 2 do CSS (nomeadamente:, :first-line, :first-letter, :before e :after). Esta compatibilidade não é permitida para os novos pseudo-elementos introduzidos nesta especificação.”- W3C Selectors Specs

live Demo of Pseudo Selectors

Nth Child and Type Selectors

22. X: n-ésima criança(n)

li:nth-child(3) { color: red;}

Lembras-te dos dias em que não tínhamos como apontar elementos específicos numa pilha? A pseudo classe resolve isso!

por favor, note que nth-child aceita um inteiro como um parâmetro, mas este não é baseado em zero. Se desejar seleccionar o item da segunda lista, utilize li:nth-child(2).

podemos até usar isto para seleccionar um conjunto variável de crianças. Por exemplo, poderíamos fazer li:nth-child(4n) para selecionar cada item da quarta lista.

23. X: n-ésimo-filho(n)

li:nth-last-child(2) { color: red;}

e se você tivesse uma lista enorme de itens em um ul, e você só precisava acessar, digamos, o terceiro ao último item? Ao invés de fazer li:nth-child(397), você poderia usar a pseudo classe nth-last-child.

esta técnica funciona quase de forma idêntica ao número 16 acima. A diferença é que ele começa no final da coleção, e funciona seu caminho de volta.

24. X: n-ésimo-tipo(n)

ul:nth-of-type(3) { border: 1px solid black;}

haverá alturas em que, em vez de seleccionar um child, terá de seleccionar de acordo com o type do elemento.

Imagine a marcação que contém cinco listas não ordenadas. Se você quisesse estilo apenas o terceiro ul, e não tivesse um único id para se conectar, você poderia usar a pseudo classe nth-of-type(n). No trecho acima, apenas o terceiro ul terá uma fronteira em torno dele.

25. X: n-ésimo-do-tipo(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

e sim, para permanecer consistente, nós também podemos usar nth-last-of-type para começar no final da lista de seletores e trabalhar nosso caminho de volta para o alvo do elemento desejado.

26. X: primeira criança

ul li:first-child { border-top: none;}

esta pseudo classe estrutural permite-nos atingir apenas o primeiro filho do pai do elemento. Você vai usar isso muitas vezes para remover fronteiras dos itens da primeira e última lista.

por exemplo, digamos que você tem uma lista de linhas, e cada uma tem um border-top e um border-bottom. Bem, com esse arranjo, o primeiro e o último item desse conjunto vai parecer um pouco estranho.

muitos designers aplicam classes de first e last para compensar isso. Em vez disso, você pode usar essas pseudo classes.

27. X: último filho

ul > li:last-child { color: green;}

o oposto de first-child, last-child visará o último item do progenitor do elemento.

last-child exemplo do Selector

vamos construir um exemplo simples para demonstrar um possível uso destas classes. Vamos criar um item de lista com estilo.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

para a marcação, não há nada de Especial: apenas uma lista simples.

aqui está o CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

este estilo irá definir um fundo, remover o preenchimento padrão do navegador no ul, e aplicar contornos a cada li para fornecer um pouco de profundidade.

para adicionar profundidade às suas listas, aplique um border-bottom a cada li que seja um tom ou dois mais escuros do que a cor de fundo do li. Em seguida, aplicar um border-top que é um par de tons mais leves.

o único problema, como mostrado na imagem acima, é que uma borda será aplicada no topo e no fundo da lista não ordenada-o que parece estranho. Vamos usar as classes :first-child e :last-child pseudo Para corrigir isso.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

lá vamos nós; isso corrige-o!

28. X: filho único

div p:only-child { color: red;}

na verdade, você provavelmente não vai se encontrar usando a pseudo classe only-child muitas vezes. No entanto, está disponível, se precisar.

permite-lhe apontar elementos que são o único filho do seu pai. Por exemplo, referenciando o trecho acima, apenas o parágrafo que é o único filho do div será colorido a vermelho.

vamos assumir a seguinte marca.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

neste caso, os segundo parágrafos divnão serão visados; apenas o primeiro div. Assim que aplica mais de uma criança a um elemento, A pseudo classe only-child deixa de produzir efeitos.

29. X: apenas do tipo

li:only-of-type { font-weight: bold;}

esta pseudo classe estrutural pode ser usada de algumas maneiras inteligentes. Ele irá direcionar elementos que não têm nenhum irmão dentro de seu contêiner pai. Como exemplo, vamos focar todos os uls que têm apenas um item de lista única.Primeiro, pergunte a si mesmo como você poderia realizar esta tarefa. Você poderia fazer ul li , mas isso iria apontar todos os itens da lista. A única solução é utilizar only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: primeira classe de tipo

a first-of-type pseudo classe permite selecionar os primeiros irmãos de seu tipo.

a Test

To better understand this, let’s have a test. Copiar a seguinte marcação para o seu editor de código:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

agora, sem ler mais, tente descobrir como atingir apenas “Item 2 da lista”. Quando você descobrir (ou desistir), leia.

solução 1

existem várias formas de resolver este teste. Vamos rever alguns deles. Vamos começar usando first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

este trecho essencialmente diz, para encontrar a primeira lista não ordenada na página, em seguida, encontrar apenas as crianças imediatas, que são itens da lista. Em seguida, filtre isso para apenas o item da segunda lista nesse conjunto.

Solução 2

outra opção é usar o selector adjacente.

p + ul li:last-child { font-weight: bold;}

neste cenário, encontramos o ul que procede imediatamente a etiqueta p, e então encontramos o último filho do elemento.

Solution 3

we can be as obnoxious or as playful as we want with these selectors.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

desta vez, pegamos no primeiro ul na página, e depois encontramos o primeiro item da lista, mas a partir do fundo!

Demo ao vivo de Nth Child and Type Selectors

Conclusion

se estiver a compensar navegadores mais antigos, como o Internet Explorer 6, ainda precisa de ter cuidado ao usar estes selectores mais recentes. Mas, por favor, não deixes que isso te impeça de aprender isto. Estarias a prejudicar-te a ti próprio. Não se esqueça de se referir aqui para uma lista de compatibilidade de navegador. Em alternativa, podes usar o excelente IE9 do Dean Edward.script js para trazer suporte para estes selectores para navegadores mais antigos.

em segundo lugar, ao trabalhar com bibliotecas JavaScript, como o jQuery popular, sempre tente usar esses seletores nativos CSS3 sobre os métodos/seletores personalizados da biblioteca, quando possível. Ele vai tornar o seu código mais rápido, como o motor selector pode usar o processamento nativo do navegador, em vez de seu próprio.

é óptimo que esteja a passar algum tempo a aprender os fundamentos do web design, mas se precisar de uma solução rápida, um dos nossos modelos de CSS prontos a usar pode ser uma boa opção. Também temos alguns itens CSS premium para você considerar.

• 
  CSS3
  15 Elegante CSS Preços Tabelas para o Seu mais Recente Projecto da Web
  Monty Shokeen
• 
  Bootstrap 4
  18 Melhores Bootstrap 4 Plugins
  Monty Shokeen

Acesso gratuito à Envato Elementos para 1 Mês

Finalmente, aqui está uma oferta muito especial para ajudar você a criar profissional-olhando sites e apps. Além de usar estes selectores CSS, Por que não aproveitar fotos de estoque de alta qualidade, imagens de vídeo, fontes premium, gráficos, ilustrações, e muito mais?Normalmente, teria de pagar por recursos como esse. Mas agora, você pode acessar milhões de recursos criativos para seus projetos de codificação por um mês inteiro, completamente grátis. E mais, você tem downloads ilimitados, então você pode pegar o quanto quiser durante esse mês, e só Pagar Se você decidir continuar!

para tirar partido desta oferta, clique neste link de inscrição especial ou digite o código abaixo na página de Registo:

elements_cont_tuts-freemonth1-4bwkbp

não espere muito tempo – a oferta só é válida por um tempo limitado!