O Guia Definitivo para Pseudo-Classes CSS
Seja você um novato ou um experiente desenvolvedor de CSS, você provavelmente já ouviu falar pseudo-classes. A pseudo-classe mais conhecida é provavelmente :flutuar, o que nos permite estilizar um elemento quando é no estado de foco, ou seja, quando um dispositivo apontador, como um mouse, é apontado para ele.
Seguindo o conceito de nossos posts anteriores sobre margin: auto e CSS Floats, nós olhamos mais detalhadamente para pseudo-classes neste post. Vamos ver que pseudo-classes realmente são, como eles funcionam, como podemos categorizá-los e como eles são diferentes dos pseudo-elementos.
O que são pseudo-classes?
Uma pseudo-classe é uma palavra-chave que podemos adicionar aos seletores CSS para definir um estado especial do elemento HTML pertencente. Podemos adicionar uma pseudo-classe a um seletor CSS usando o sintaxe do cólon : como isso: a: hover …
Uma classe CSS é um atributo que podemos adicionar aos elementos HTML para os quais desejamos aplicar as mesmas regras de estilo, como itens de menu principais ou títulos de widgets da barra lateral. Em outras palavras, podemos usar classes CSS para agrupar ou classificar elementos HTML que são semelhantes de uma forma ou de outra.
As pseudoclasses são semelhantes a elas no sentido de que também são usado para adicionar regras de estilo aos elementos que compartilham a mesma característica.
Mas enquanto classes genuínas são usuário definido e pode ser visto no código-fonte, por exemplo o trabalho de classes CSS regulares é para classificar ou agrupar elementos. Os desenvolvedores sabem como seus elementos devem ser agrupados: eles podem formar classes como "itens de menu", "botões", "miniaturas", etc. para agrupar e posteriormente estilizar elementos semelhantes. Estas classificações baseiam-se nas características dos elementos que são dada pelos próprios desenvolvedores. Por exemplo, se um desenvolvedor decide usar um Elementos HTML no entanto têm suas próprias características comuns com base em seu estado, posição, natureza e interação com a página e o usuário. Estas são as características que são não normalmente marcado no código HTML, mas nós podemos meta-los com pseudo-classes em CSS, por exemplo: Esses são os tipos de características que geralmente são direcionadas pelas pseudo-classes. Para entender melhor a diferença entre classes e pseudo-classes, vamos supor que estamos usando a classe Podemos estilizar esses últimos elementos filhos com o seguinte CSS: Mas o que acontece quando o último elemento muda? Bem, nós teremos que mover o Esse incômodo de as classes de atualização podem ser deixadas para o agente do usuário, pelo menos para aquelas características que são comuns entre os elementos (e ser um último elemento é tão comum quanto possível). Tendo um pré-definido Existem muitos tipos de pseudo-classes, todos eles nos fornecem maneiras de direcionar elementos com base em seus recursos que são inacessíveis ou mais difíceis de acessar. Aqui está uma lista de pseudo classes padrão no MDN. Pseudo-classes dinâmicas são adicionadas e removidas dos elementos HTML dinamicamente, com base no estado em que se transicionam em resposta às interações do usuário. Alguns dos exemplos de pseudo-classes dinâmicas são Pseudoclasses baseadas em estado são adicionadas aos elementos quando em um estado estático particular. Alguns de seus exemplos mais conhecidos são: A pseudo-classe baseada no estado mais popular tem que ser Pseudo-classes estruturais classificam elementos baseados sobre a sua posição na estrutura do documento. Seus exemplos mais comuns são Existem também diversas pseudo-classes que são difíceis de classificar, como: Uma das coisas mais difíceis sobre pseudo-classes é provavelmente entender a diferença entre as Ambas são pseudo-classes estruturais e marcam um elemento específico dentro de um elemento pai (container), mas de uma maneira diferente. Assumir n é 2, então Vamos dar uma olhada em um exemplo. Vamos ver como este CSS curto estilo o HTML em dois casos diferentes. No caso 1, o segundo elemento dentro de um Mas se o elemento pai faz tem um segundo parágrafo, o Em nosso exemplo, o Parágrafo 1, criança 1 Parágrafo 2, criança 3 No segundo caso, movemos a lista não ordenada para o terceiro lugar, e o segundo parágrafo virá antes dela. Isso significa que tanto o Parágrafo 1, criança 1 Parágrafo 2, criança 2 Se você quiser ler mais sobre as diferenças entre o Quando falamos de pseudo-classes, também é importante entender como eles diferem dos pseudo-elementos, a fim de não misturá-los. Mas enquanto usamos pseudo-classes para selecionar elementos HTML que existe na árvore do documento apenas não marcados separadamente, pseudo-elementos nos permitem atingir elementos que não existem normalmente no DOM, seja de todo (por exemplo Há também um diferença na sintaxe. Pseudo-elementos são geralmente identificados com dois-pontos duplos Isso pode levar a um caso de confusão, como no CSS2, pseudo-elementos foram marcados com um único cólon também - os navegadores ainda aceitam a sintaxe de um único cólon para pseudo-elementos. Existem também diferenças entre pseudo-classes e pseudo-elementos em a maneira como podemos direcioná-los com CSS. Pseudo-elementos só podem aparecer depois de a sequência de seletores, enquanto que pseudo-classes podem ser colocadas em qualquer lugar na sequência do seletor CSS. Por exemplo, você pode segmentar o último item da lista de um elemento da lista como OU A primeira seqüência do seletor seleciona o último filho dentro do Vamos tentar fazer algo parecido com pseudo-elementos. O código CSS acima é válido e o texto "vermelho" será exibido depois de a Este código, por outro lado, não funcionará, já que não é possível alterar a posição de um pseudo-elemento dentro da seqüência seletora. Além disso, somente um pseudoelemento pode aparecer ao lado de um seletor, enquanto pseudo-classes podem ser combinados entre si se a combinação faz sentido. Por exemplo, para segmentar os primeiros elementos filhos que também são somente leitura, podemos criar uma combinação das pseudo-classes Um código seletor com um É importante saber que esses são não Pseudo-classes CSS que estão sendo segmentados pelo jQuery. Eles são chamados de extensões de seletores do jQuery. As extensões de seletor do jQuery permitem segmentar elementos HTML com palavras-chave mais simples. A maioria deles são combinações de vários seletores CSS normais, representados por uma única palavra-chave.Objetivo das Pseudo-Classes
.último para identificar os últimos elementos em diferentes contêineres pai.
li.last text-transform: maiúscula; option.last font-style: italic;
.último classe do último elemento anterior ao atual.: último filho pseudo-classe é muito útil mesmo. Desta forma, nós não tem que indicar o último elemento no código HTML, mas ainda podemos estilizá-los com o seguinte CSS: li: último filho text-transform: maiúscula; opção: último filho font-style: italic;
Principais tipos de pseudo-classes
1. Pseudo-Classes Dinâmicas
:flutuar, :foco, :ligação, e :visitou, tudo o que pode ser adicionado ao tag de âncora. a: visitou color: # 8D20AE; .button: hover, .button: focus font-weight: negrito;
2. Pseudo-Classes Baseadas no Estado
:verificado que pode ser aplicado a caixas de seleção ():tela cheia para segmentar qualquer elemento que esteja sendo exibido no modo de tela inteira:Desativado para elementos HTML que podem estar no modo desativado, como , , e . :verificado, que sinaliza se uma caixa de seleção está marcada ou não. .caixa de seleção: checked + label font-style: italic; input: disabled background-color: #EEEEEE;
3. Pseudo-Classes Estruturais
:primeiro filho, : último filho, e : n-filho (n) - tudo pode ser usado para direcionar um elemento filho específico dentro de um contêiner com base em sua posição - e :raiz que segmenta o elemento pai de nível mais alto no DOM. 4. Pseudo-Classes Diversas
: não (x) que seleciona elementos que não correspondem ao seletor x: lang (código de idioma) que seleciona elementos cujo conteúdo está em um idioma específico: dir (direcionalidade) que seleciona elementos com conteúdo de uma determinada direcionalidade (da esquerda para a direita ou da direita para a esquerda). p: lang (ko) cor de fundo: # FFFF00; : root background-color: # FAEBD7;
n-criança vs nth do tipo Pseudo-Classes
: n-filho e : n-de-tipo pseudo-classes.: nth-of-child (n) tem como alvo um elemento que é o segundo filho de seu elemento pai, e : n-de-tipo (n) alvos o segundo entre os mesmo tipo de elemento (como parágrafos) dentro de um elemento pai. / * um parágrafo que também é o segundo filho dentro de seu elemento pai * / p: nth-child (2) color: # 1E90FF; // lightblue / * o segundo parágrafo dentro de um elemento pai * / p: n-de-tipo (2) font-weight: bold;
Caso 1
n-filho (2) regra não se aplica a ela. Embora seja um segundo filho, é não um parágrafo. n-de-tipo (2) regra será aplicada, pois essa regra só procura o elementos, e não se preocupa com outra tipos de elementos (como listas não ordenadas) dentro do elemento pai.n-de-tipo (2) regra vai estilo o segundo parágrafo que é criança 3.
Lista não ordenada 1, criança 2
Caso 2
: n-filho (2) e a : n-de-tipo (2) regras serão aplicadas, como o segundo parágrafo é também o segundo filho de seu pai
Lista não ordenada 1, criança 3
: nth-of-child e : n-de-tipo pseudo-classes, CSS Tricks tem um ótimo post sobre isso. Se você usa o SASS, o Family.scss pode ajudá-lo a criar n-criançaelementos ified.Pseudo-Classes vs Pseudo-Elementos
Pseudo-elementos, tal como ::antes e ::depois de (veja este tutorial sobre como usá-los) também são adicionado por agentes do usuário, e eles podem ser direcionados e estilizados com CSS também, assim como pseudo-classes. ::antes e ::depois de) ou apenas como certas partes dos elementos existentes ::primeira carta ou :: espaço reservado). ::, enquanto pseudo-classes são identificadas com um único cólon :.1. O lugar deles na sequência seletora de CSS
ul>: last-child.red cor: # B0171F;
ul> .red: último filho color: # B0171F;
.vermelho) e o segundo seleciona o último filho entre os elementos que possuem o .vermelho classe dentro ul> .red :: after display: bloco; conteúdo: 'vermelho'; cor: # B0171F;
itens com a classe .vermelho. ul> :: after.red display: bloco; conteúdo: 'vermelho'; cor: # B0171F;
2. Número de Ocorrências em uma Seqüência Seletora
:primeiro filho e :somente leitura Da seguinte maneira: : primogênito: somente leitura cor: #EEEEEE;
Extensões do seletor de jQuery
: A sintaxe nem sempre constitui uma pseudo-classe CSS adequada. Se você já usou o jQuery, então você pode ter usado muitos de seus seletores com : sintaxe, por exemplo $ (': checkbox'), $ (': input') e $ (': selecionado'). / * Altere a fonte de todos os elementos HTML relacionados à entrada, como botão, selecione e insira * / $ (": input") .css ("font-family", "courier new")
