CSS3 seletores

CSS3 fornece acesso a uma ampla variedade de seletores que você usa para identificar qual elemento para formatar em uma página. Um seletor define o que a formatação do estilo define como formatar ele. No entanto, é fácil entrar em sobrecarga selector. A maioria dos desenvolvedores usam uma combinação de tag e atributo seletores para executar todas as tarefas-selector relacionados. Aqui estão os seletores de tag comumente usados, que fornecem metodologias de selecção total.

• etiqueta,etiqueta: Separando duas etiquetas com uma vírgula significa selecionar ambas as marcas, independentemente de onde eles aparecem no documento. Por exemplo, usando p, div selecionaria tudo

  e as marcas dentro do documento.

• etiqueta>etiqueta: Separando duas etiquetas com um sinal de maior que (>) Informa ao navegador para selecionar uma marca que tem uma outra tag como um pai. Por exemplo, se você tem

  e utilização div> p, o navegador irá selecionar o

  tag.

• etiqueta etiqueta: Separando duas etiquetas por um espaço informa o navegador para selecionar um tag que aparece dentro de outra tag. Este seletor é diferente de usar um sinal de maior que na medida em que a primeira tag não precisam de ser directamente imediatamente antes do segundo tag. Por exemplo, se você tem

  e utilização div> p, o navegador não selecione nada. No entanto, se você usar div p em vez disso, o navegador irá selecionar o

  tag.

• etiqueta+etiqueta: Separando duas etiquetas com um sinal de mais (+) Informa ao navegador para selecionar um tag que aparece imediatamente após o outro tag. Por exemplo, se você tem

  e utilização div + p, o navegador irá selecionar o

  tag. Note-se que o

  tag não aparecer dentro da marca, que aparece após a tag.

• etiqueta~etiqueta: Separando duas etiquetas com um til (~) Informa ao navegador para selecionar cada tag que aparece após uma outra tag. Por exemplo, se você tem

  e utilização div ~ p, o navegador irá selecionar tanto

  etiquetas. Isso é diferente de div + p (Onde o navegador irá selecionar apenas a primeira

  tag que segue a tag).

• :raiz: Selecciona o elemento raiz do documento. O elemento raiz depende do tipo de documento. Este seletor é usado normalmente com documentos XML, mas você poderia usá-lo com qualquer tipo de documento.

A fim de proporcionar excelente selecção de apenas os elementos certos, os desenvolvedores costumam usar seletores de atributo no lugar de seletores de tag. Aqui estão os seletores de atributos que os desenvolvedores usam geralmente.

• .Nome da classe: Seleciona todos os objetos que têm uma classe o valor do atributo com o nome fornecido. Por exemplo, .StdPara deve selecionar cada objeto que tem uma class = "StdPara" atributo sem levar em conta o tipo de objeto.

• #Identidade: Seleciona todos os objetos que têm uma identidade o valor do atributo com o nome fornecido. Por exemplo, #ThirdHeader deve selecionar cada objeto que tem uma id = "ThirdHeader" atributo sem levar em conta o tipo de objeto.

• : Lang (Identificador Language): Seleciona qualquer objeto com o valor do idioma especificado. Por exemplo, : Lang (en) iria selecionar qualquer objeto que usa Inglês como sua língua. Aqui está uma lista de identificadores de idioma comum.

• [Atributo]: Seleciona todos os objetos que usam um atributo específico, independentemente do valor do atributo. Por exemplo, [Lang] iria selecionar todos os objetos que usam o lang atributo.

• [Atributo=Valor]: Seleciona todos os objetos que possuem um atributo com um valor particular. O valor deve corresponder precisamente. Por exemplo, [Lang = "en-us"] deve selecionar cada objeto que tem um atributo de linguagem com um valor de Inglês.

• [Atributo~ =Valor]: Seleciona todos os objetos que possuem um atributo que contém um valor específico. O valor de pesquisa só precisa aparecer em algum lugar dentro de valor como um todo. Por exemplo, [Título ~ = "secundário"] seleciona todos os objetos com atributos de título que contêm a palavra Secundário como uma palavra discreta. Este seletor funciona com palavras inteiras.

• [Atributo| =Valor]: Seleciona todos os objetos que possuem um atributo que começa com um valor particular. O valor de busca deve aparecer no início do valor como um todo, mas não precisa de ser todo o valor. Por exemplo, [Title | = "Sub"] seleciona todos os objetos com atributos de título que começam com a palavra Sub. Este seletor trabalha com termos com hífen.

• [Atributo= ^Valor]: Seleciona todos os objetos que possuem um atributo que começa com um valor particular. Por exemplo, [Title | = "Sub"] seleciona todos os objetos com atributos de título que começam com a palavra Sub. Esta forma de o seletor é menos restritiva do que a [Atributo | = Valor] atributo. Usando este formulário irá seleccionar title = "subheader", title = "Sub Header", ou title = "Sub-Header" com a mesma fiabilidade.

• [Atributo$ =Valor]: Seleciona todos os objetos que possuem um atributo que termina com um valor particular. Por exemplo, [Title $ = "secundário"] seleciona todos os objetos com atributos de título que terminam com a palavra Secundário. Esta forma de o atributo é nonrestrictive - não requer nenhuma formatação especial.

• [Atributo* =Valor]: Seleciona todos os objetos que possuem um atributo que contém um valor específico. Por exemplo, [Title $ = "secundário"] seleciona todos os objetos com atributos de título que contêm com a palavra Secundário. Esta forma de o seletor é menos restritiva do que a [Atributo~ =Valor] atributo. Usado desta forma, select title = "SecondaryParagraph", title = "Parágrafo Secundária", ou title = "Secundário-Parágrafo" com a mesma fiabilidade.

Um especial não() selector completa a gama comum de seletores. Para dizer o navegador não para selecionar um tag ou atributo em particular, mas para selecionar tudo o mais em vez disso, você usa o :não() selector. Por exemplo, : Não (p) selecionaria tudo, mas as marcas de parágrafo na página.