Cheatsheet e detalhes dos seletores CSS

Folha de dicas dos seletores CSS

Recentemente, venho mergulhando nos seletores de CSS.

Existem muitos seletores CSS com símbolos desconhecidos,>. , * + ~ [] etc, então eu estava frequentemente confuso sobre como os seletores de CSS funcionam. Eventualmente, endireitei-os na minha cabeça e re-desenhei-os como eu entendo.

* Na verdade, eu gostaria de organizá-los em uma única página de tamanho A4 para economizar papéis e salvar a Terra, mas não pude, porque há muitos seletores que eu gostaria de adicionar e tive que passar por mais de uma página . São todas as quatro páginas A4, exceto as capas.

Imprima esta folha de dicas e cole-a na parede. Não os memorize, apenas espiando. Espero que este infográfico o ajude a encontrar rapidamente os seletores CSS adequados e economize seu tempo.

Folha de dicas dos seletores de CSSJogo de seletores de CSS de Ryan Yu

Faça o download da folha de dicas dos seletores de CSS e aproveite o jogo🕹

Não se preocupe. É tudo grátis.

Mergulhe no seletor CSS.

Vou listar o infográfico juntamente com as definições de MDN para facilitar as coisas para você.

Seletor de tipo

O seletor de tipo CSS corresponde aos elementos pelo nome do nó. Em outras palavras, ele seleciona todos os elementos do tipo fornecido em um documento. - MDN

Seletor de tipo

Seletor de ID

Seleciona um elemento com base no valor do seu atributo id. Deve haver apenas um elemento com um determinado ID em um documento. - MDN

Seletor de ID

Seletor Descendente

Qualquer elemento correspondente a B que é descendente de um elemento correspondente a A (ou seja, um filho ou filho de um filho, etc.). o combinador é um ou mais espaços ou dual maior que sinais. - MDN

Seletor Descendente

Combine os seletores descendente e de identificação

Combine os seletores descendente e de identificação

Seletor de classe

O seletor de classe CSS corresponde aos elementos com base no conteúdo de seu atributo de classe. - MDN

Seletor de classe

Combine o seletor de classe

Combine o seletor de classe

Combinador de vírgula

Qualquer elemento correspondente a A e / ou B. - MDN

Combinador de vírgula

O Seletor Universal

Basta selecionar tudo!

O Seletor Universal

Combine o seletor universal

Combine o seletor universal

Seletor de irmão adjacente

O combinador de irmão adjacente (+) separa dois seletores e corresponde ao segundo elemento somente se seguir imediatamente o primeiro elemento, e ambos forem filhos do mesmo elemento pai. - MDN

Seletor de irmão adjacente

Seletor Geral de Irmãos

O combinador geral de irmãos (~) separa dois seletores e corresponde ao segundo elemento somente se seguir o primeiro elemento (embora não necessariamente imediatamente) e ambos sejam filhos do mesmo elemento pai. - MDN

Seletor Geral de Irmãos

Seletor de criança

O combinador filho (>) é colocado entre dois seletores de CSS. Corresponde apenas aos elementos correspondidos pelo segundo seletor que são os filhos dos elementos correspondidos pelo primeiro. - MDN

Seletor de criança

Pseudo-seletor do primeiro filho

A pseudo classe CSS: first-child representa o primeiro elemento de um grupo de elementos irmãos. - MDN

Pseudo-seletor do primeiro filho

Pseudo-seletor de filho único

A pseudo classe CSS: filho único representa um elemento sem irmãos. É o mesmo que: primeiro filho: último filho ou: enésimo filho (1): enésimo último filho (1), mas com uma especificidade mais baixa. - MDN

Pseudo-seletor de filho único

Pseudo-seletor de último filho

A pseudo-classe CSS last-child representa o último elemento de um grupo de elementos irmãos. - MDN

Pseudo-seletor de último filho

Pseudo-seletor de enésimo filho

A pseudo classe CSS: nth-child () combina elementos com base em sua posição em um grupo de irmãos. - MDN

Pseudo-seletor de enésimo filho

N º Seletor de Último Filho

A pseudo classe CSS: nth-last-child-child () combina elementos com base em sua posição entre um grupo de irmãos, contando desde o final. - MDN

N º Seletor de Último Filho

Primeiro do seletor de tipo

A pseudo classe CSS: first-of-type CSS representa o primeiro elemento de seu tipo entre um grupo de elementos irmãos. - MDN

Primeiro do seletor de tipo

Nº do seletor de tipo

A pseudo classe CSS: nth-of-type () combina elementos de um determinado tipo, com base em sua posição entre um grupo de irmãos. - MDN

Nº do seletor de tipo

Seletor do enésimo tipo com fórmula

Seletor do enésimo tipo
 Nota:
: enésimo tipo (par)
: enésimo tipo (ímpar)
: enésimo tipo (2)
: enésimo tipo (2n)
: enésimo tipo (3n-1)
: enésimo tipo (2n + 2)

Somente seletor de tipo

A pseudo classe CSS: only-of-type CSS representa um elemento que não possui irmãos do mesmo tipo. - MDN

Somente seletor de tipo

Último seletor de tipo

A pseudo classe CSS: last-of-type CSS representa o último elemento de seu tipo entre um grupo de elementos irmãos. - MDN

Último seletor de tipo

Seletor vazio

A pseudo classe CSS vazia representa qualquer elemento que não tenha filhos. Os filhos podem ser nós de elemento ou texto (incluindo espaço em branco). Comentários, instruções de processamento e conteúdo CSS não afetam se um elemento é considerado vazio. - MDN

Seletor vazio

Pseudo classe de negação

A pseudo classe CSS: not () representa elementos que não correspondem a uma lista de seletores. Como impede que itens específicos sejam selecionados, é conhecida como pseudo-classe de negação. - MDN

Pseudo classe de negação

Seletor de Atributos

Os seletores de atributo são um tipo especial de seletor que corresponderá aos elementos com base em seus atributos e valores de atributo. Sua sintaxe genérica consiste em colchetes ([]) contendo um nome de atributo seguido por uma condição opcional para corresponder ao valor do atributo. Os seletores de atributo podem ser divididos em duas categorias, dependendo da maneira como eles correspondem aos valores de atributo: Seletores de presença e valor e Seletores de atributo de valor de cadeia de caracteres. - MDN

Seletor de Atributos

Seletor de Valor do Atributo

Seletor de Valor do Atributo

O atributo inicia com o seletor

Este seletor selecionará todos os elementos com o atributo attr para os quais o valor começa com val. - MDN

O atributo inicia com o seletor

Atributo termina com seletor

Esse seletor selecionará todos os elementos com o atributo attr para os quais o valor termina com val. - MDN

Atributo termina com seletor

Seletor de Curinga do Atributo

Esse seletor selecionará todos os elementos com o atributo attr para o qual o valor contém o valor da substring. (Uma substring é simplesmente parte de uma string, por exemplo, "cat" é uma substring na string "caterpillar".) - MDN

Seletor de Curinga do Atributo

Parabéns, você concluiu.

Artigos

🕹 CodePen

Qualquer dúvida ou feedback

Gostaria de ouvir seus comentários sobre como posso melhorar isso para você. Por favor, deixe seus comentários abaixo ou através do meu Twitter.

Muito obrigado a Ryan Yu por me ajudar a fazer o jogo de seletores de CSS. Ryan Yu é o autor de , onde aprendi muitas técnicas interessantes de front-end.

Feliz codeign hoje