Olá, queridos leitores! Continuando o assunto CSS Selectores que eu quero oferecer-lhe descrição das subsidiárias e seletores contextuaisAlém de sua análise comparativa, porque de acordo com a lógica da aplicação, eles são muito semelhantes, embora tenham alguma diferença.

Nas minhas publicações, fiquei em detalhe em vários tipos de selecionadores CSS :; assim como . By the way, no último artigo, onde diferentes tipos de atributo seletor desmontados, descrevi em detalhes em detalhes como meus cálculos teóricos podem ser imediatamente verificados fazendo alterações no código HTML e CSS on-line usando o Google Chrome integrado () ferramenta. Tais ferramentas de edição têm as modificações mais recentes de todos os navegadores populares, incluindo plugin Firebug para o Firefox ().

Material teórico deste post também pode ser estudado, tornando a edição de qualquer página de qualquer site! Para fazer isso, basta pressionar F12 se você usar o Google Chrome ou Mozilla Firefox (). E agora vou apresentar o conteúdo da marca P, sobre o exemplo de que estudaremos selectores CSS de subsíno e contextuais:

Este parágrafo inclui tags fortes de formataçãoque alocam texto gordo e itálico.

Usando a ferramenta de edição acima descrita, inseri este parágrafo diretamente para este artigo, marcando o texto correspondente no lado esquerdo da janela para editar, como resultado do qual o texto deste parágrafo apareceu no topo da página:

Este design HTML ,. Este parágrafo será experimental na publicação de hoje, em seu exemplo, mostrarei como o design de seu texto está mudando, dependendo de quais selecionadores - criança ou contextual - são usados \u200b\u200bna regra CSS.

A filha é chamada de elemento que está localizado diretamente dentro do pai. Antes de prosseguir diretamente para o tópico, vou dar uma imagem que reflita a hierarquia de tags no documento HTML sobre o exemplo do parágrafo cujo texto é dado acima e que desativaremos hoje:

Este design também é chamado de árvore de elementos. Nesta figura, os recipientes de aninhamento estão claramente representados, o que implica relações hierárquicas entre as tags. O parágrafo p Tag é um elemento subsidiário em relação. Ao mesmo tempo, a etiqueta forte não é uma subsidiária para div, já que é corrida no contêiner P.

Seletor de subsidiária CSS.

O seletor infantil na árvore de elementos está sempre diretamente dentro do elemento pai, neste caso, a sintaxe de escrever o seletor CSS será a seguinte:

O estilo será aplicado ao seletor 2, mas somente se for uma criança para o seletor 1. Analisaremos mais detalhadamente usando a captura de tela acima com a árvore de elementos. Por exemplo, seguindo a sintaxe, você pode definir esta regra:

P\u003e EM (cor: verde;)

Esta regra influenciará a última palavra parágrafo "itálico", uma vez que é concluída entre as tags de abertura e fechamento de EM. A tag EM é uma subsidiária para P, porque é colocada diretamente dentro dela, portanto, o texto do conteúdo, ou seja, a palavra "itálico" será pintada em verde.

No entanto, a outra tag de EM não serve como descendente direto da etiqueta P, como faz parte da etiqueta forte, como resultado de que parte do parágrafo "formatando tags em e fortes" não serão pintados.

Seletor de CSS contextual

É uma fila para descobrir qual é o seletor de CSS contextual. Ao estabelecer uma ou outra página do site com muita frequência, as tags são investidas em uma para outra. Para que os estilos para esses elementos funcionem corretamente, os seletores são usados, que atuam em algum contexto, daí o nome.

Se para a regra CSS ser aplicada, o seletor filho deve estar localizado diretamente dentro do elemento pai (o primeiro nível de nidificação), então para o seletor de contexto, é completamente sem importância e qualquer nível de nidificação pode ser aplicado, todo o Propriedades iguais do elemento serão transferidas do pai. Ao mesmo tempo, a sintaxe é:

Como você pode ver, o seletor contextual consiste em selecionadores simples separados por um espaço. Para selecionadores contextuais, é permitido usar dois e mais tag investidos uns nos outros. Agora fazemos uma regra de CSS para o parágrafo de teste, que eu liderei acima:

P EM (cor: verde;)

Como você pode ver, o verde é colorido não só o texto do conteúdo do parágrafo, que é diretamente concluído na etiqueta de formatação de Em, isto é, a palavra "itálico", mas também o texto do texto de outro em tag, que Também inclui a tag forte. Aconteceu porque aplica a regra com o seletor contextual, para o qual o nível de nidificação não é importante em contraste com a subsidiária. Esta é a principal diferença entre a subsidiária e o seletor contextual.

Considere outro exemplo da interação dos seletores de contexto e filho com nosso parágrafo. Propingindo as próximas regras CSS para a subsidiária e o seletor de contexto:

Div em (cor: vermelho;) p\u003e em (cor: verde;)

Depois disso, nosso parágrafo adquire tal design:

Como você pode ver, um pedaço de texto incluído nas tags em e fortes são pintados em vermelho, porque é justo para a regra do seletor contextual, ou seja, a tag EM é concluída nos contêineres fortes e div, e o nível de aninhamento , como já foi observado, não importa.

A questão surge: Por que a palavra "itálico", que também é o conteúdo de Em, pintado em verde? Afinal, e para ele, a regra do seletor contextual é relevante. Mas para esta seção do texto do parágrafo, a regra do seletor da filha também é verdadeira, porque não contradiz a condição de que o seletor filho, o elemento deve entrar diretamente na tag P.

O fato é que o CSS tem uma lei prioritária para propriedades CSS abaixo. Ou seja, nesse caso, a regra da filha do seletor está no documento abaixo do que os estilos CSS prescritos para o seletor de contexto do recipiente div. Portanto, a palavra "itálico" ficou verde. Se você os alterar em alguns lugares, a regra "p\u003e em (cor: verde;)" deixa de agir e o texto do texto "itálico" será vermelho.

Descrição

Pseudo-Class: NTH-filho é usado para adicionar estilo a elementos com base na árvore de elementos.

Sintaxe

elemento: nth-filho (estranho | mesmo |<число> | <выражение>) {...}

Valores

Ímpar todos os números de elementos estranhos. Mesmo todos os números pares de elementos. O número do número de seqüência do elemento filho em relação ao pai. Numeração começa com 1, será o primeiro elemento na lista. A expressão é definida na forma de A + B, onde inteiros A e B e n - o contador que automaticamente leva o valor 0, 1, 2 ...

Se um é zero, não é escrito e o registro é reduzido para b. Se B é zero, também não é especificado e a expressão é escrita na forma de um. A e B podem ser números negativos, neste caso, o sinal mais muda para menos, por exemplo: 5n-1.

Devido ao uso de valores negativos A e B, alguns resultados também podem ser negativos ou iguais a zero. No entanto, apenas valores positivos afetam os elementos devido ao fato de que a numeração de elementos começa com 1.

Na guia. 1 mostra algumas possíveis expressões e palavras-chave, e também especificou quais números dos elementos estarão envolvidos.

HTML5 CSS3 IE CR OP SA FX

	2134	2135	2136	2137	2138
Óleo	16	34	62	74	57
Ouro	4	69	72	56	47
Madeira	7	73	79	34	86
Pedras	23	34	88	53	103

Neste exemplo, a pseudo-classe: nth-filho é usada para alterar o estilo da primeira linha da tabela, bem como destacar a cor de todas as filas até mesmo (fig. 1).

Última Atualização: 04/21/2016

Um grupo especial de pseudoclasses formam pseudoclasses que permitem escolher certos elementos infantis:

: Primeiro filho: representa um elemento que é o primeiro elemento filho

: Última criança: representa um item que é o último elemento filho

: Apenas filho: representa um elemento que é a única subsidiária em algum contêiner

: Somente-do tipo: seleciona um item que é o único elemento de um determinado tipo (tag) em algum contêiner

: Nth-criança (n): representa um elemento filho que tem um número n específico, por exemplo, o segundo elemento filho

: Nth-Último filho (n): apresenta um elemento filho que tenha um número n específico, a partir do final

: Nth-of-type (n): seleciona um determinado tipo de elemento filho que tem um número específico

: NTH-Last-of-Type (N): Seleciona um elemento filho de um determinado tipo que possui um número específico a partir do final

Pseudo classe primeiro filho

Usamos o primeiro filho Pseudoclass para selecionar os primeiros links em blocos:

Comprimidos

Smartphones.

Estilo seletor A: O primeiro filho se aplica ao link se é o primeiro elemento filho de qualquer elemento.

E no segundo bloco, o primeiro elemento é um parágrafo, portanto, o estilo não se aplica a nenhum link.

Pseudolass último filho

Usamos o último filho pseudolass:

Smartphones.

Comprimidos

Seletor A: O último filho determina o estilo para referências que são os últimos elementos da filha.

No primeiro bloco, apenas a última subsidiária é um link. Mas no segundo elemento do último filho, o parágrafo é, portanto, no segundo bloco, o estilo não se aplica a nenhum dos links.

Seletor APENAS-CRIANÇA

Seletor: Somente filho seleciona elementos que são os únicos elementos filha em contêineres:

Título

Os parágrafos com textos "Text1" e "Text4" são os únicos elementos filho em seus contêineres externos, para que o estilo seja aplicado a eles - fonte vermelha.

Apenas tipo de pseudo-classe

O único tipo de pseudo-classe seleciona um elemento que é o único elemento de um tipo específico no contêiner. Por exemplo, o único elemento div, com os elementos de outros tipos no mesmo contêiner pode ser tanto quanto você gosta.

Parágrafo único e elemento spun

Embora o estilo seja definido para elementos div, ele não será aplicado, uma vez que o recipiente do corpo contém dois elementos div, e não um. Mas no corpo há apenas um elemento p, então ele receberá uma estilização. E também no recipiente p há apenas um elemento de extensão, por isso também será estilizado.

Classe pseudo da nidade-criança

A Classe Pseudo da NTH-criança permite que você estilize cada segundo, o terceiro elemento, apenas mesmo ou apenas itens estranhos, etc.

Por exemplo, estilize mesmo e linhas de mesa ímpares:

Smartphones.

Samsung	Galaxy S7 Edge.	60000
maçã	iPhone se.	39000
Microsoft.	Lumia 650.	13500
Alcatel.	Ídolo s4.	30000
Huawei.	P9.	60000
Htc.	HTC 10.	50000
Meizu.	Pro 6.	40000
Xiaomi.	Mi5.	35000

Para determinar o estilo para itens ímpares, o seletor é transmitido para "ímpar":

Tr: nth-criança (ímpar) ()

Para estilizar elementos até mesmo no seletor, o valor "par" é transmitido:

Tr: nth-filho (par) ()

Também neste seletor, podemos transferir o número do elemento estilizado:

Tr: nth-criança (3) (fundo-cor: #bbb;)

Neste caso, a terceira linha é estilizada.

Outra oportunidade é o uso de um substituto para um número, que é expresso pela letra n:

TR: NTH-criança (2n + 1) (fundo-cor: #bbb;)

Aqui o estilo é aplicado a cada segunda string ímpar.

O número na frente de N (neste caso 2) representa o elemento filho que será alocado da seguinte forma. O número que vem depois que o sinal de mais é mostrado, a partir do qual o elemento que você precisa para iniciar a seleção, ou seja, +1 significa que você precisa iniciar no primeiro elemento filho.

Assim, neste caso, a seleção começa com o primeiro elemento, e o seguinte é lançado 2 * 1 + 1 \u003d 3º elemento, a seguir 2 * 2 + 1 \u003d 5º elemento e assim por diante.

Por exemplo, se quisermos alocar a cada terceiro elemento, a partir do segundo, poderíamos escrever:

TR: NTH-filho (3n + 2) (fundo-cor: #bbb;)

Pseudo-classe: no último filho essencialmente fornece a mesma funcionalidade, apenas a contagem regressiva dos elementos não é desde o início, mas a partir do final:

TR: NTH-Último filho (2) (cor de fundo: #bbb; / * 2 linha do final, isto é, o penúltimo * /) tr: nth-Último filho (2n + 1) (cor de fundo : #eee; / * linhas ímpares, a partir do final * /)

Classe pseudo nth-of-type

Pseudo-Class: NTH-OF-TYPE permite selecionar um elemento filho de um determinado tipo em um número específico:

Tr: nth-of-type (2) (cor de fundo: #bbb;)

Da mesma forma, a classe pseudo-turma do NTH-Último tipo, apenas agora a contagem regressiva dos elementos vem do final:

TR: NTH-ÚLTIMO DE TIPO (2N) (cor de fundo: #bbb;)

Eu acho que muitos sabem sobre seletores contextuais em CSS. Eles são usados \u200b\u200bcom mais frequência, no entanto, camerâmias experientes sabem perfeitamente bem que às vezes os seletores contextuais ganham certos problemas. Esse problema está relacionado ao fato de que na estrutura do elemento pode haver muitos elementos idênticos incorporados uns nos outros. E é necessário aplicar o estilo não para todos os elementos aninhados, mas apenas para o elemento direto diretamente. Aqui por isso e usado selectores da filha em CSS.

Para que o problema se torne mais compreensível, vamos dar um pequeno exemplo. Vamos ter tais Código HTML:

E nossa tarefa é tornar apenas vermelho " Segundo parágrafo"Se escrevermos usando o seletor de contexto:

Contêiner p (
Cor vermelha;
}

Que nos tornaremos vermelhos ambos os parágrafos que não precisamos de jeito nenhum. Esta tarefa é muito simplesmente resolvida por selectores da filha em CSS:

Recipiente\u003e P (
Cor vermelha;
}

Tudo, agora nos tornamos vermelhos apenas " Segundo parágrafo". Como este parágrafo é diretamente subsidiário para .recipiente. MAS " Primeiro parágrafo"é uma subsidiária para divãAssim, sob a ação do seletor infantil, não cai.

Esta tarefa é tão facilmente resolvida, no entanto, há um enorme menos selectores da filha em CSS - Eles não funcionam nos navegadores Internet Explorer.. Por esta razão, seu uso é extremamente indesejável. Mas se você de repente se encontrar em algum lugar, agora você saberá o que significa esse tipo de seletores e o que ele faz.

A tarefa principal deste seletor segue de seu nome e consiste no acesso ao elemento filho. Exibe com a ajuda de um sinal elementar "\u003e", que liga um elemento filho com um elemento pai. Também vale a pena notar que os selecionadores simples são usados \u200b\u200bem circulação. Como exemplo, considere a seguinte codificação:

Elemento\u003e UL (Padding- Top: 20px;)

Essa codificação significa que um travessão interno de 20 pixels da borda superior será aplicado à lista que é investida em elemento. A presença neste ícone de entrada "\u003e" mostra que a regra aplica-se apenas às listas do primeiro nível de nidificação.

Análise detalhada do seletor de trabalho do elemento filho

O seletor do elemento da criança tem propriedades semelhantes com o conceito do seletor descendente. No entanto, há um recurso característico que mostra a principal diferença entre essas operações. Encontra-se no fato de que o efeito do seletor descendente se estende a absolutamente todos os elementos, enquanto o seletor infantil subordina os estilos da posição do primeiro nível de classificações.

A Apreciação mais claramente, o trabalho da operadora de subsidiária ajudará o seguinte exemplo:

Div\u003e r (cor: # ff0000; / * vermelho * /)

< div> Esta string terá um texto preto padrão.< span> Esta linha é repintada em vermelho devido ao fato de que p é uma marca filha para a diva. < p> Mais uma vez vemos letras pretas.< span> Aqui também vemos caracteres pretos, já que para esta extensão, o pai é tag.

Este exemplo confirma o trabalho da operadora de subsidiária de acordo com o grau de aninhamento.

Restrição para a aplicação de um operador subsidiário

Vale a pena notar que esta operação é suportada por todos os navegadores que não o lendário Internet Explorer 6. Eu acho que há poucas pessoas usando este navegador, mas se esses unicumes estiverem disponíveis, então para eles, há uma maneira de sair da situação que ser descrito em um artigo separado.

Por que aplicar

Os programadores referem-se a seletores de elementos filho nos casos em que você precisa atribuir seu estilo único com elementos aninhados. Além disso, usar este seletor pode reduzir o volume CSS, o que aumentará a legibilidade do documento. Como mostra a prática, esta operação é mais referida ao criar menus suspensos.

Um seletor de elemento filho também é usado para atribuir estilos exclusivos a elementos cujos pais já são conhecidos por anteriormente. Em outras palavras:

Principal\u003e cabeçalho ( / * Registro só se aplica ao heter principal * / }

Este exemplo é justo nos casos em que a tag de cabeçalho é usada para destacar os títulos dos artigos. No nosso caso, pedimos ao design apenas o principal heter, e não prejudicam o secundário. Essa técnica também evita o uso de identificadores de extensão, o que, por sua vez, facilita o peso do arquivo CSS e torna mais legível.

Resumindo

Assim, o operador subsidiário pode ser aplicado não apenas para o projeto dos menus suspensos, mas também para uma pequena otimização do seu recurso de Internet para trabalhar robôs de pesquisa.