Como trabalhar com seletores padrão css3
Video: Curso de CSS3 - Aula 05 - Seletor Id e Class
Conteúdo
Em alguns casos, uma seleção que você precisa fazer em CSS3 não tem nada a ver com qualquer etiquetas ou atributos, mas o padrão em que os objetos aparecem na página. Por exemplo, você pode querer selecionar apenas o primeiro objeto, independentemente do que esse objeto pode ser.
Em alguns casos, você deseja formatar com suplentes de uma lista ou outro elemento de dados repetitivos, de alguma maneira para tornar mais fácil para o usuário para ver cada elemento individualmente. A lista a seguir fala sobre seletores padrão que os documentos normalmente usam.
:primeira carta: Selecione a primeira letra do objeto especificado. Este seletor é útil na criação de efeitos textuais especiais, como capitulares.
É extremamente raro ver a maioria dos seletores padrão usado sozinho, porque você normalmente não quer especialmente formato apenas a primeira letra de cada objeto na página de uma certa maneira. Geralmente, você vê seletores padrão usado em combinação com um seletor de atributo, como o seletor de classe, ou com um seletor de tags particular.
Usando seletores padrão global pode ter resultados inesperados ou até mesmo causar um aplicativo para falhar (dependendo de como o código do aplicativo e interagem CSS).
:primeira linha: Seleciona a primeira linha do objeto especificado.
:antes: Seleciona a área imediatamente antes de o conteúdo do objeto especificado. Este seletor é normalmente associado à propriedade de conteúdo para inserir algo especial antes de o conteúdo do objeto existente.
:depois de: Seleciona a área imediatamente após o conteúdo do objeto especificado. Este seletor é normalmente associado à propriedade de conteúdo para inserir algo especial antes de o conteúdo do objeto existente.
: Primeiro de tipo: Seleciona o primeiro objeto de um tipo específico.
Mesmo que a especificação não realmente dizer-lhe que você deve fornecer um tipo ou um pai, alguns seletores padrão não irá funcionar sem um. Tipicamente ver a: selector-de-primeiro tipo usado com um selector de marcação, (por exemplo, p: primeiro de tipo), mas que pode também ser usado com um selector de atributo. Todos os outros tipo e padrão criança seletores funcionam da mesma maneira.
: Last-of-type: Seleciona o último objeto de um tipo específico.
: Somente-de-tipo: Seleciona o único objeto de um tipo específico. Se houver mais de um objeto de um tipo particular, em seguida, nenhuma seleção for feita.
: Enésimo-de-tipo (Número): Seleciona o objeto especificado de um tipo específico.
: Nth-last-of-type (Número): Seleciona o objeto especificado de um tipo específico, a partir do fim da lista de objetos.
:primeiro filho: Seleciona o primeiro filho de um objeto especificado. Este seletor é comumente usado para aplicar uma formatação especial para o primeiro item em uma lista ou tabela.
: Last-child: Seleciona o último filho de um pai particular.
:filho único: Seleciona o único filho de um pai particular. Quando um objeto pai tem mais de um filho, nenhuma seleção for feita.
: Nth-child (Número): Seleciona o filho especificado de um pai particular.
: Nth-last-child (Número): Seleciona o filho especificado de um pai especial começando desde o final da lista de filhos.
seletores padrão pode criar alguns efeitos interessantes em seu site. O procedimento a seguir dá uma olhada rápida no que estes seletores pode fazer. É importante lembrar que você verá seletores, incluindo seletores padrão, muitas vezes, por isso considero este um ponto de partida.
criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.
Video: HTML5-CSS-javascript - Seletores CSS
Abrir ExternalCSS.HTML.
Digite o seguinte código após o já existente
marca no arquivo e salvar as alterações no disco.
- 1
- Dois
- Três
- Quatro
- Cinco
Abrir ExternalCSS.CSS.
Video: Curso de CSS3 - Aula 04 - Agrupamento de Seletores
Digite o seguinte código após os estilos existentes e salvar as alterações no disco.
.ListItem: first-letter {font-size: xx-large -} ListItem: after {content:. " 27A8"-font-size: x-large-color:. vermelho -} ListItem: nth-child (ímpar) {background-color: LightBlue -} ListItem:. nth-child (2n + 2) {background-color: LightGreen-}Atualizar a página de teste.
Você vê o efeito de fazer a mudança de estilo. Para começar, cada bala começa com um extra-grande letra.
No final de cada bala você vê um personagem seta especial. Observe como o CSS utiliza 27A8 para criar esta personagem. Ao visualizar gráficos, como o que a ikreator.com e o que está em petterhesselberg.com, você vê estes códigos de caracteres apresentados com um &# Combinação no início. CSS usa os mesmos códigos numéricos, mas depende de uma barra invertida (/).
A: selector nth-child () pode ser usado em um número de maneiras. Mesmo que o exemplo não mostrá-lo, você pode fornecer um número para selecionar um elemento filho específico. No entanto, este selector também aceita uma série de outras entradas interessantes. Por exemplo, você pode usar as palavras-chave pares e ímpares para selecionar os objetos pares ou ímpares em uma lista.
Você também pode fornecer uma equação que usa n para indicar o objeto atual. Quando as entradas do navegador 0 para n, por exemplo, a equação torna-se 2 * 0 + 2 ou elemento 2. Se você queria começar com o elemento 3 em vez disso, você pode usar 2n + 3. A equação que você fornece pode ser de qualquer complexidade necessária para produzir o resultado desejado.
Neste caso, você adicionar uma lista para a página para permitir a detecção mais fácil de padrões. Naturalmente, os padrões não estão limitados a listas ou tabelas. Você pode usá-los com qualquer arranjo de objetos que poderiam se prestam a seleção por um padrão.