Olá, queridos leitores do blog. Hoje continuaremos preenchendo o nosso com materiais e começaremos a falar sobre algo tão fundamental como os seletores na linguagem CSS.

Existem sete tipos deles - tag, classe, Id, universal, atributos, bem como pseudoclasses e pseudoelementos. Um pouco demais, não é? Bom, não importa, vamos dar uma olhada em todos eles aos poucos e com exemplos detalhados.

Em publicações anteriores já vimos e também conhecemos unidades de tamanho, como e aprendemos sobre os princípios de herança em CSS. Bem, hoje nós, como eu disse, estamos abrindo um capítulo muito sério no estudo da linguagem de marcação de estilo.

Seletores de tags e classes em CSS

Antes de estudar as regras de estilo, você precisará aprender como e de acordo com quais princípios definir essas tags pelas quais o navegador entenderá a quais elementos do código HTML elas precisam ser aplicadas. Os seletores são diferentes. Os mais simples, do ponto de vista do entendimento, utilizam nomes de tags, aos quais deverão ser aplicadas as regras da linguagem CSS escritas a seguir.

Neste exemplo, todas as tags de parágrafo P usarão uma cor de fonte vermelha e uma cor de preenchimento de fundo cinza. Qualquer regra CSS pode ter vários seletores especificados ao mesmo tempo. Como devem ser lidos? Sempre da direita para a esquerda, ou seja comece com aquele mais próximo da chave de abertura.

No exemplo acima, a primeira linha mostra um seletor de tag (elemento) que força a cor da fonte a ser vermelha para todos os contêineres Div.

Conteúdo de um contêiner Div normal

Na segunda linha vemos um exemplo de seletor complexo no qual temos um novo elemento como aula. Está registrado como . Podemos usar um nome arbitrário como valor da classe usando os símbolos ,,,[_],[-].

Mas além da classe, a linguagem de marcação de estilo também usa Id. Qual é a diferença entre uma classe e um Id? O valor deste último deve ser único, porque Id é um identificador exclusivo para uma tag HTML e seu nome (valor) só podem ser usados ​​uma vez no código.

E o valor da classe não é único e pode ser usado para qualquer grandes quantidades elementos no código. Aqueles. tags diferentes (Div, P, H1, etc.) podem ter o mesmo valor para seu atributo de classe:

Como é usado em seletores CSS? Acontece que o nome dele está escrito com um ponto na frente.

Portanto, quando vemos algo no código CSS começando com um ponto, imediatamente entendemos que estamos falando de uma classe. Se olharmos o exemplo dado na imagem, agora em todos os elementos do código HTML onde está escrito “classe” com o valor “Azul”, o texto ficará na cor azul.

Mas isso não vai acontecer porque escolhemos o nome da classe “Azul”. Poderíamos chamá-lo de qualquer coisa (até mesmo “xyz”), e a cor em nosso exemplo é definida exatamente como atribuída ao seletor com esta classe. Espero que isso esteja claro? Vamos alterar o nome (valor) da classe no exemplo:

Parágrafo com texto

Parágrafo com texto

Aqueles. Agora temos a classe XYZ e uma regra escrita para ela:

Xyz (cor: azul)

Coloriu o texto do parágrafo de azul. Este exemplo enfatiza mais uma vez que nome para o atributo de classe você pode usar qualquer um. Porém, vamos continuar.

Vamos dar uma outra olhada em um exemplo de como os seletores de tags e classes são usados ​​em CSS. Vamos imaginar que temos as seguintes regras de estilo:

Div (cor: vermelho) div.a123 (cor: verde) .xyz (cor: azul)

Vamos imaginar também que no código HTML temos os seguintes elementos:

De acordo com as regras prescritas para os seletores especificados, o conteúdo dos elementos de código HTML fornecidos deve ser semelhante a este:

Agora vamos ver por que o navegador interpretou o estilo desses elementos de código HTML dessa maneira. Para o primeiro container Div, no qual nenhuma classe é especificada, será aplicada a regra CSS aplicável a todos os containers: div (cor: vermelho). Consequentemente, seu conteúdo ficará vermelho. Era isso que precisava ser mostrado.

Na tag da segunda Div temos a classe “a123”. Neste caso, serão aplicadas as regras CSS correspondentes a “div.a123” (pois temos apenas uma tag Div com o atributo class="a123" escrito nela). Portanto, o conteúdo do segundo recipiente ficará verde.

Mas você provavelmente notou que também pode aplicar a primeira regra CSS “div (color:red)” à segunda Div, já que ela se destina a todos os containers, sem exceção. Isto resulta em uma contradição que pode ser resolvida em CSS introduzindo o conceito.

Falaremos sobre isso em detalhes um pouco mais tarde, mas por enquanto direi apenas que a prioridade de “div.a123” (para a segunda Div no exemplo em consideração) será maior.

A propósito, uma situação semelhante surge com a terceira Div do nosso exemplo. Existem duas opções para isso: o seletor de tags “div” e o seletor de classes “.xyz”. Novamente, por motivos que ainda não foram explicados por mim (leia sobre isso no link logo acima), a prioridade deste último será maior, portanto o conteúdo do terceiro container será colorido em azul.

Vamos em frente. No exemplo acima, temos uma tag de parágrafo P, que contém class="a123". Acontece que este elemento não se enquadra em nenhum dos três seletores que especificamos (todos os três perderam).

Possui apenas uma intersecção com a segunda opção, mas este seletor só será utilizado para tags "Div" com classe "a123", e não para a tag de parágrafo P. Como resultado, a cor do texto neste parágrafo permanecerá o padrão , ou seja preto.

A seguir no exemplo temos um elemento de parágrafo com class="xyz". Será aplicado css mais recente regra ".xyz (cor: azul)". Portanto, o texto deste parágrafo será colorido em azul. Aqui, eu acho, tudo está claro.

Seletor universal e ID exclusivo

Agora vamos passar para os Ids que já mencionei. Quando vemos algo no código CSS um hash na frente, então isso significa que estamos lidando com Id:

Geralmente este seletor é escrito sem mencionar a tag, a que se refere (a primeira opção no exemplo dado acima), embora a segunda grafia também seja aceitável, mas raramente é usada. Isso se deve ao fato de que o valor do atributo Id no código será único, o que significa que não pode haver dois elementos com os mesmos valores de Id. Aqueles. não adianta esclarecer, embora isso não seja proibido.

Portanto, geralmente eles simplesmente escrevem um hash (hash), seguido imediatamente do valor (nome) do atributo Id. Vamos supor que temos a seguinte regra para Id:

#voltar (cor:vermelho)

e o código contém o seguinte fragmento:

que, como resultado da aplicação da regra após “#back”, será interpretado pelo navegador da seguinte forma:

Contêiner Div com ID exclusivo

CSS também fornece seletor universal indicado por um asterisco, o que mostra que esta regra se aplicará geralmente a qualquer elemento do código:

* (cor:preto)

Neste caso, o texto entre qualquer tag será preto (a cor padrão). É claro que todos os outros seletores (tags, classes e Id) terão prioridade maior que o universal.

Seletores de atributos e seu futuro no CSS moderno

Todas as opções descritas acima (tag, classe, Id e universal) funcionarão em absolutamente todos os navegadores. Mas existem outras opções que não funcionam em todos os lugares.

Este tipo inclui seletores de atributos, que são muito convenientes e permitem expandir significativamente e ao mesmo tempo simplificar as possibilidades de influência direcionada, mas que, infelizmente, não são totalmente suportados por todos os navegadores.

Como você provavelmente se lembra, na linguagem HTML, dentro das tags podemos utilizar vários atributos que nos permitem atribuir certas propriedades ao conteúdo desses próprios elementos. Portanto, seria lógico usar não apenas nomes de tags, mas também nomes de atributos como seletores na linguagem CSS.

Na verdade, já fizemos isso quando olhamos para classe e Id, porque eram essencialmente atributos de algumas tags. Só que ID e Classe são muito importantes no layout e foram colocados em grupos separados, cada um com sua sintaxe.

Como utilizar outros seletores que existem na linguagem? Atributos HTML(não Id e não classe)? Muito simples - coloque-os entre colchetes:

(cor: verde)

Agora, qualquer tag no código HTML que contenha “título” escrito terá uma cor de texto verde.

Muito conveniente, na minha opinião. Mas todo o problema com o uso de seletores de atributos é que eles não funcionam no IE 6 e abaixo geralmente ou funcionam, mas apenas parcialmente. Até que a porcentagem de usuários que acessam a Internet usando o IE 6 seja zero, esse método conveniente provavelmente não se espalhará no layout. Mesmo assim, você precisa saber sobre sua existência e ser capaz de utilizá-los.

Como você pode ver no exemplo, não importa se o atributo especificado no seletor possui algum valor ou está vazio. Mas isso não é tudo o que você pode fazer, porque é apenas uma música.

Você pode indicar neles não apenas o nome do atributo, mas também seu significado:

(cor: verde)

Como resultado, as regras CSS especificadas para tal seletor serão aplicadas apenas à tag que possui um “título” com o valor “Primeiro Parágrafo” (no nosso exemplo esta será a segunda linha):

O exemplo descrito era uma igualdade estrita, mas você pode escrever este seletor assim:

(cor: verde)

Que. esta regra CSS se aplicará apenas aos elementos de código HTML cujo “título” contém a palavra “parágrafo” (em nosso exemplo, serão a segunda e a terceira linhas):

A sintaxe do seletor de atributos interpreta «~=» como “a palavra inteira está contida”. Por exemplo, para um elemento com title="Segundo parágrafo" CSS правило «color:green» уже применяться не будет.!}

Mas você pode colocá-lo em seu lugar «*=» e então serão levadas em consideração não apenas palavras individuais especificadas no seletor, mas também partes de palavras (qualquer pedaço de texto contido em qualquer lugar do atributo):

(cor: verde)

Neste caso, e para o elemento com title="Segundo parágrafo" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (tudo que começa com o valor especificado entre parênteses), o que ajuda a criar um seletor de atributos como este:

(cor:vermelho)

Você provavelmente se lembra que o atributo para especificar . Portanto, muitas vezes os links internos de um site são tornados relativos, mas os links externos não podem ser tornados de outra forma a não ser torná-los absolutos.

Portanto, tudo links externos começará com “http”, e os internos podem ser especificados de forma relativa sem usar “http”. Que. O seletor especificado em nosso exemplo permitirá colorir todos os links externos do site(todos absolutos) em vermelho. Pois bem, os relativos que não contenham “http” permanecerão com a cor que foi adotada para eles por padrão. Eu acho ótimo!!!

Como você pode ver, os seletores de atributos nos dão muitas possibilidades e o fato de ainda não serem amplamente utilizados é mérito da muito pobre e ofendida empresa Melkosoft, e em particular de sua ideia IE 6. Mas aos poucos eles estão começando para serem usados ​​em CSS e em breve, é claro, eles ganharão vida.

Sim, existe outra operadora «$=» - tudo que termina com o valor especificado entre aspas:

(cor: verde)

Como resultado, a segunda e a terceira linhas do nosso primeiro exemplo serão coloridas em verde, porque o significado de “título” termina em “raf”. É assim que os seletores de atributos funcionariam maravilhosamente bem no CSS moderno se ainda não houvesse uma certa porcentagem de usuários usando o navegador IE 6.

Na verdade, de todos os tipos, só nos restam dois a considerar: . Mas quero passar isso para o próximo artigo, onde também falaremos sobre suas diversas combinações.

Boa sorte para você! Nos vemos em breve nas páginas do blog

Você pode estar interessado

Seletores de pseudoclasses e pseudoelementos em CSS (hover, first-child, first-line e outros), relacionamentos entre Etiquetas HTML código
Prioridades em Css e seu aumento devido a Importante, combinação e agrupamento de seletores, estilos de usuário e autor
Estilo de lista (tipo, imagem, posição) - Regras CSS para personalização aparência listas em código HTML
Plano de fundo em CSS (cor, posição, imagem, repetição, anexo) - tudo para definir o plano de fundo ou cor de fundo Imagens HTML elementos
CSS - o que é, como as folhas de estilo em cascata são conectadas ao código HTML usando Estilo e Link
Unidades de dimensão (pixels, Em e Ex) e regras de herança em CSS
Para que serve CSS, como conectar folhas de estilo em cascata a Documento HTML e a sintaxe básica desta linguagem
Preenchimento, Margem e Borda - definidos CSS interno e margens externas, bem como molduras para todos os lados (superior, inferior, esquerda, direita) Como configurar a cor de fundo alternada de linhas de tabelas, listas e outros Elementos HTML no site usando a pseudoclasse enésima criança
Como encontrar e remover linhas de estilo não utilizadas (seletores extras) no arquivo CSS do seu site
Exibir (bloco, nenhum, embutido) em CSS - defina o tipo de exibição dos elementos HTML na página da web

Seletor
Seletor universal

O esboço do código CSS é assim:

Seletor (propriedade CSS: valor; propriedade CSS: valor; ... etc.)

Em um seletor universal, o asterisco * atua como seletor:

* (propriedade CSS: valor; propriedade CSS: valor; ... etc.)

Seletor universal, afeta todas as tags do documento HTML de uma só vez.

Por exemplo, você pode remover todos os recuos internos e externos de todas as tags em um documento HTML:

* (margem: 0; preenchimento: 0; )

Digamos que temos um documento HTML contendo o seguinte código:

Leopardo da neve

do seguinte modo .

Vamos usar um seletor universal para definir a cor da fonte de todas as tags como verde, o nome da fonte como arial e o estilo da fonte como oblíquo.

Leopardo da neve

O leopardo da neve (irbis, ak leopard) é um grande mamífero predador da família dos felinos. Vive nas montanhas do Afeganistão, Birmânia, Butão, Índia, Cazaquistão, Quirguistão, China, Mongólia, Nepal, Paquistão, Rússia, Tadjiquistão e Uzbequistão. O leopardo da neve é ​​​​fino, longo, corpo flexível, pernas relativamente curtas, cabeça pequena e cauda muito longa.

O comprimento do leopardo da neve incluindo a cauda é de 200-230 cm e pesa até 55 kg.

A cor da pelagem é cinza claro e esfumaçado com manchas escuras em forma de anel ou sólidas.

O leopardo das neves caça principalmente cabras montesas e ovelhas. Sua dieta também inclui javalis, faisões e até esquilos; Devido à inacessibilidade do habitat da espécie, os leopardos das neves ainda permanecem pouco estudados. Porém, segundo estimativas aproximadas, seu número varia em torno de 10 mil indivíduos. A partir de 2013, a caça aos leopardos da neve é ​​​​proibida em todos os lugares. A página no navegador ficará assim. Você também pode experimentar

Às vezes, ao criar um site, torna-se necessário aplicar um estilo específico a todos os elementos que aparecem na página, sem exceção. Para implementar esta tarefa, é utilizado um seletor universal.

Descrição

É indicado pelo símbolo “*”. Com sua ajuda, você pode selecionar todas as tags da página de uma vez, sem fazer ajustes em sua finalidade e aninhamento. Por exemplo:

* (tamanho da fonte: 18px; )

Usando esta entrada, definimos todos os elementos com texto para terem uma altura de fonte de 18 pixels.

Vamos dar uma olhada mais de perto. Antes da versão 2 do CSS, não existia um seletor universal. Ele corresponde a todos os elementos, portanto os estilos especificados serão aplicados a eles simultaneamente. Você deve ser extremamente cuidadoso ao usar este seletor. A cautela é causada pela possível ocorrência de dificuldades na herança de estilos, ou melhor, pelo seu comportamento imprevisível.

Também é importante notar que o uso de uma classe, identificador ou atributo permite pular o seletor universal sem nenhum dano. Por exemplo:

*. esquerda (borda: 1px sólido #000; ). esquerda (borda: 1px sólido #000; )

Esses registros carregam a mesma carga semântica, e o estilo será aplicado da mesma forma com e sem o uso de um seletor universal.

Onde pode ser usado?

Basicamente, o seletor universal é encontrado na prática ao redefinir os estilos padrão do navegador. Por exemplo, recuos, tamanhos de fonte e assim por diante.

No entanto, embora este método seja simples e também reduza significativamente o comprimento do código, ele tem uma série de desvantagens.

Desvantagens do seletor universal ao redefinir estilos padrão:

• alguns dos estilos não podem ser redefinidos
• para o atributo selecionado não é possível redefinir o preenchimento
• pode “matar” a aparência padrão do botão na maioria dos navegadores
• O navegador Mozilla funciona com pequenos bugs
• retarda significativamente o carregamento da página do Mozila (no entanto, isso se aplica apenas a sites com CSS com mais de mil linhas, caso contrário, o atraso é imperceptível).

Pelas razões descritas acima, é recomendado redefinir os estilos por elemento usando um seletor de tipo. Um exemplo de código semelhante para redefinir estilos é fornecido no final

Às vezes você precisa definir um estilo para todos os elementos de uma página da web ao mesmo tempo, por exemplo, definir uma fonte ou estilo de texto. Nesse caso, um seletor universal que corresponda a qualquer elemento da página web ajudará.

No CSS3, o seletor universal também é usado em combinação com um namespace.

• ns|* - todos os elementos no namespace ns.
• *|* - todos os elementos em todos os namespaces.
• |* - todos os elementos sem um namespace explícito.

Sintaxe

* (Descrição das regras de estilo)

O símbolo de asterisco (*) é usado para indicar um seletor universal. Em alguns casos, não é necessário especificar um seletor universal. Assim, por exemplo, as entradas *.class e .class são idênticas em seus resultados.

Designações

Exemplo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Observação

Navegador Internet Explorer até a sexta versão inclusive, entende a construção *html, o que é ilógico, pois a tag é uma tag de nível superior e não pode haver nenhum elemento acima dela. Este bug às vezes é usado para estilizar o IE6, por exemplo, a construção * html body (...) adicionará estilo ao seletor de corpo no IE6 e anteriores e não funciona em outros navegadores.

EM Navegador de Internet No Explorer 7, quando você adiciona um seletor universal antes do nome do seletor sem espaços, ele é tratado como um seletor de contexto. Assim, a entrada *body só funciona no IE7 e é ignorada por outros navegadores.

Especificação

Cada especificação passa por vários estágios de aprovação.

• Recomendação - A especificação foi aprovada pelo W3C e é recomendada como padrão.
• Recomendação do Candidato ( Possível recomendação ) - o grupo responsável pelo padrão está satisfeito com o cumprimento de seus objetivos, mas requer ajuda da comunidade de desenvolvimento para implementar o padrão.
• Recomendação Proposta Recomendação sugerida) - nesta fase o documento é submetido ao Conselho Consultivo do W3C para aprovação final.
• Rascunho de Trabalho – Uma versão mais madura de um rascunho que foi discutido e alterado para revisão da comunidade.
• Rascunho do editor ( Rascunho editorial) - uma versão preliminar da norma após as alterações feitas pelos editores do projeto.
• Rascunho ( Especificação de rascunho) - a primeira versão preliminar da norma.

• A tarefa que está sendo executada é selecionar todos os elementos. Na verdade, todos.
• A designação é o símbolo de asterisco - *.
• Exemplo de uso:

Redefinir o preenchimento para o padrão para todos os elementos

Saiba mais sobre o seletor universal

Introduzido na versão 2 do CSS. Corresponde a qualquer elemento em . Portanto, os estilos especificados para o seletor universal são aplicados a todos os elementos de uma só vez. Por esse motivo, aconselho você a usá-lo com muito cuidado – herdar estilos pode causar problemas. Ou melhor, um comportamento dificilmente previsível (para um programador inexperiente). Consideraremos esse ponto com mais detalhes na seção sobre herança.

Outra coisa sobre um seletor universal é que quando ele é usado em combinação com outro seletor (como um seletor de classe, identificador ou atributo) como parte de um seletor simples, ele pode ser ignorado impunemente. Isto é quase o mesmo que dizer em vez de “Todos os dromedários são camelos dromedários” simplesmente “dromedários são camelos dromedários”. O significado não mudou.

Exemplo:

*.error ( color: red; ) .error ( color: red; ) /* essas duas regras são equivalentes. O seletor universal está faltando no segundo caso */

Escopo de aplicação

Na verdade, é mais conveniente usar um seletor universal, como no primeiro exemplo, para redefinir os valores iniciais de estilos dependentes do navegador (em particular, recuos).

Mas mesmo tal aplicação nem sempre será uma boa ideia. Devido às desvantagens do seletor universal descrito no artigo, é melhor usar . Ou seja, use seletores de tipo.

Foi assim que abordamos suavemente o próximo tópico. Parece que resolvemos o seletor universal. É hora de seguir em frente. Próxima parada -.