1. A versão oficial e original, em inglês, deste documento, encontra-se em: e os seus direitos são conforme:
Copyright © 2011 W3C® (MIT, ERCIM, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidades, marcas e uso de documentos.
2. A única versão normativa deste documento é a versão em língua inglesa que se encontra no site do W3C.
3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.
Este documento foi traduzido em 28 de janeiro de 2012 por: Maurício Samy Silva e encontra-se hospedado no "Site do Maujor " em
A tradução para a língua portuguesa do Brasil, foi para este documento. Vale dizer, as páginas remetidas pelos links nele constantes, estão em sua versão original em língua inglesa.
Por favor, relate erros encontrados neste documento para Maurício Samy Silva
Por favor, consulte a errata deste documento para tomar conhecimento de eventuais correções.
Veja também as traduções disponíveis.
Copyright © 2011 W3C® (MIT, ERCIM, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidades, marcas e uso de documentos.
Seletores são padrões que casam com elementos de uma árvore e como tal se constituem em uma das várias tecnologias disponíveis para selecionar nós em um documento XML. Seletores foram otimizados para uso com HTML e XML e projetados para serem usados em " performance-critical code".
CSS (Cascading Style Sheets) é uma linguagem destinada a descrever como será a renderização das marcações de documentos HTML e XML na tela, no papel, em dispositivos aurais, etc. Seletores são usados pelas CSS para atrelar propriedades de estilização aos elementos de um documento.
Esse documento descreve os seletores que já existem nas CSS1 [CSS1] e CSS2 [CSS21], bem como apresenta os novos seletores das CSS3 e outras linguagens que porventura deles faça uso.
Seletores definem a seguinte função:
expressão * elemento → booleano
Ou seja, dados um elemento e um seletor essa especificação define se haverá ou não o casamento entre eles.
Expressões podem ser usadas para selecionar um conjunto de elementos ou um simples elemento de um conjunto usando um mecanismo de avaliação de todos os elementos de uma sub-árvore. STTS (Simple Tree Transformation Sheets) é uma linguagem de transformação de árvores XML que usa esse mecanismo. [STTS3]
Essa seção descreve o status deste documento à época da sua publicação. Outros documentos poderão sobrescrever esse documento. A listagem das publicações atuais do W3C bem como sua evolução histórica pode ser encontrada em W3C technical reports index at"//www.w3.org/TR/.
Esse documento foi produzido pelo CSS Working Group como uma Proposta de Recomendação.
Uma Recomendação do W3C é um documento maduro que foi amplamente revisado e está pronto para implementação. O W3C recomenda a todos que implementem essa especificação. Comentários podem ser enviados para a (arquivo) lista pública [email protected] (ver instruções). Ao enviar um e-mail, por favor, coloque o texto “css3-selectors” no assunto do e-mail de preferência escrevendo: “[css3-selectors] …sumário do comentário…”
Esse documento foi revisado pelos membros do W3C, por desenvolvedores de software é por outros grupos do W3C e partes interessadas tendo sido endossado pelo Diretor do W3C como uma Recomendação. Trata-se de um documento estável que pode ser usado como material de referência ou citado por outros documentos. O objetivo do W3C ao criar uma Recomendação é o de chamar a atenção para a especificação e promover seu desenvolvimento global. Isso contribui para a melhoria da funcionalidade e da interoperabilidade da Web.
Esse documento foi produzido por um grupo operando sob a 5 February 2004 W3C Patent Policy. O W3C mantém uma lista pública para divulgação de patentes criada em conjunto com seus grupos e que inclui, também, instruções para publicação de patentes. Qualquer pessoa que tenha conhecimento de uma patente que acredita conter Essential Claim(s) deve divulgar essa informação de acordo com a section 6 of the W3C Patent Policy.
Em documento separado um relatório de implementações contém uma suite de testes mostrando várias funcionalidades dessa especificação.
Esse documento é idêntico ao documento anterior de proposta de Recomendação, exceto por modificações editorias no seu início e atualização de referências nele contidas.
Seletores nível 1 e seletores nível 2 são definidos como um subconjunto das funcionalidades dessa especificação e constam das especificações para as CSS1 e CSS2.1 respectivamente.
Algumas funcionalidades dessa especificação são específicas das CSS ou têm limitações ou regras específicas das CSS. Nessa especificação esses casos são descritos em termos das CSS2.1. [CSS21]
Todos os textos dessa especificação têm carater normativo exceto exemplos, notas e seções marcadas explicitamente como não normativas.
Terminologia adicional é definida na seção Definições das [CSS21]. Os fragmentos de código que ilustram os exemplos foram escritos com uso de sintaxe XML [[XML10] ou HTML [[HTML40]].
Essa seção não é normativa.
A principal diferença entre os seletores constantes das CSS2 e os definidos nessa especificação são:
Essa seção não é normativa, ela simplesmente apresenta um sumário das demais seções dessa especificação.
Um seletor representa uma estrutura. Essa estrutura pode ser usada como uma condição (por exemplo: em uma regra CSS ) que determina quais são os elementos casados na árvore do documento pelo seletor ou uma descrição do fragmento HTML ou XML que corresponda àquela estrutura.
Seletores podem ser desde um simples nome de elemento até uma rica descrição contextual.
A tabela a seguir apresenta um sumário da sintaxe dos seletores:
Sintaxe | Significado Casa com... | Descrito na seção | Inimcialmente definido nas CSS nível |
---|---|---|---|
* | qualquer elemento | Seletor universal | 2 |
E | elemento do tipo E | Seletor tipo | 1 |
E[foo] | elemento do tipo E contendo o atributo "foo" | Seletor de atributo | 2 |
E[foo="bar"] | elemento E cujo valor do atributo "foo" é exatamente igual a "bar" | Seletor de atributo | 2 |
E[foo~="bar"] | elemento E cujo valor do atributo "foo" é uma lista de valores separados por espaço em branco um dos quais é exatamente igual a "bar" | Seletor de atributo | 2 |
E[foo^="bar"] | elemento E cujo valor do atributo "foo" começa exatamente com a string "bar" | Seletor de atributo | 3 |
E[foo$="bar"] | elemento E cujo valor de atributo "foo" termina exatamente com a string "bar" | Seletor de atributo | 3 |
E[foo*="bar"] | elemento E cujo valor do atributo "foo" contém a string "bar" | Seletor de atributo | 3 |
E[foo|="en"] | elemento E cujo valor do atributo "foo" é uma lista de valores separados por espaço e formados pela string "en" isolada ou separada de outra string por um sinal de hífen | Seletor de atributo | 2 |
E:root | elemento E, raiz do documento | Pseudoclasses estruturais | 3 |
E:nth-child(n) | elemento E o n-th filho do seu elemento pai | Pseudoclasses estruturais | 3 |
E:nth-last-child(n) | elemento E o n-th filho do seu elemento pai contado do último para o primeiro | Pseudoclasses estruturais | 3 |
E:nth-of-type(n) | elemento E o n-th elemento irmão do seu tipo | Pseudoclasses estruturais | 3 |
E:nth-last-of-type(n) | elemento E o n-th elemento irmão do seu tipo contado do último para o primeiro | Pseudoclasses estruturais | 3 |
E:first-child | elemento E primeiro filho do seu elemento pai | Pseudoclasses estruturais | 2 |
E:last-child | elemento E último filho do seu elemento pai | Pseudoclasses estruturais | 3 |
E:first-of-type | elemento E primeiro elemento irmão do seu tipo | Pseudoclasses estruturais | 3 |
E:last-of-type | elemento E último elemento irmão do seu tipo | Pseudoclasses estruturais | 3 |
E:only-child | elemento E filho único do seu elemento pai | Pseudoclasses estruturais | 3 |
E:only-of-type | elemento E irmão único do seu tipo | Pseudoclasses estruturais | 3 |
E:empty | elemento E que não possui elementos filho (incluindo nós de texto) | Pseudoclasses estruturais | 3 |
E:link E:visited | elemento E âncora de um hyperlink ainda não visitado (:link) ou já visitado (:visited) | Pseudoclasses para links | 1 |
E:active E:hover E:focus | elemento E durante determinadas ações de usuário | Pseudoclasses de ação do usuário | 1 and 2 |
E:target | elemento E alvo de um URI | Pseudoclasse target | 3 |
E:lang(fr) | elemento do tipo E no idioma "fr" (o idioma do documento determina como ele é determinado) | Pseudoclasse :lang() | 2 |
E:enabled E:disabled | elemento E da interface do usuário nos estados habilitado e desabilitado respectivamente | Pseudoclasse para estado de elemento da UI | 3 |
E:checked | elemento E da interface do usuário no estado marcado (por exemplo: radio-button ou checkbox) | Pseudoclasse para estado de elemento da UI | 3 |
E::first-line | primeira linha formatada do elemento E | Pseudoelemento ::first-line | 1 |
E::first-letter | primeira letra formatada do elemento E | Pseudoelemento ::first-letter | 1 |
E::before | conteúdo gerado antes do elemento E | Pseudoelemento ::before | 2 |
E::after | conteúdo gerado depois do elemento E | Pseudoelemento ::after | 2 |
E.warning | elemento E cujo valor do atributo classe é "warning" (o idioma do documento define como a classe é determinada). | Seletor classe | 1 |
E#myid | elemento E cujo valor do atributo ID é "myid". | Seletor ID | 1 |
E:not(s) | elemento E que não casa com o seletor simples s | Pseudoclasse negação | 3 |
E F | elemento F descendente do elemento E | Sinal de combinação descendente | 1 |
E > F | elemento F filho do elemento E | Sinal de combinação filho | 2 |
E + F | elemento F imediatamente após o elemento E | Sinal de combinação irmão adjacente | 2 |
E ~ F | elemento(s) F após elemento E | Sinal de combinação irmão geral | 3 |
Na coluna Significado acrescente "Casa com" no início do texto que explica o significado do seletor.
A sintaxe para seletores é insensível ao tamanho de caixa para o conjunto ASCII de caracteres (ou seja, [a-z] e [A-Z] são equivalentes). A exceção a essa regra é para os casos que não estão sob o controle das especificações para seletores. A sensibilidade ao tamanho de caixa para nomes, nomes e valores de atributos depende da linguagem em que o documento foi escrito. Por exemplo: em HTML os nomes dos elementos são insensíveis ao tamanho de caixa, mas em XML não são. A sensibilidade ao tamanho de caixa para os prefixos de namespaces é definida em [CSS3NAMESPACE].
Um seletor é uma cadeia de uma ou mais sequência de seletores simples separados por sinais de combinação. É válido acrescentar um pseudoelemento no final de uma sequência de seletores simples.
Uma sequência de seletores simples é uma cadeia de seletores simples não separados por um sinal de combinação. A cadeia sempre começa com um seletor simples ou com o seletor universal. Nenhum outro seletor tipo de seletor ou seletor universal é permitido na sequência de seletores.
Denominamos seletor simples os seletor tipo, seletor universal, seletor de atributo, seletor classe, seletor ID e as pseudoclasses.
Os sinais de combinação são os seguintes: espaço em branco, "sinal maior que" (U+003E, >
), "sinal mais" (U+002B, +
) e "sinal til" (U+007E, ~
). Pode haver espaço em branco entre um sinal de combinação e um seletor simples. Somente os caracteres "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) e "form feed" (U+000C) podem ocorrer como espaço em branco. Outros caracteres semelhantes, tais como "em-space" (U+2003) e "ideographic space" (U+3000), não são considerados espaço em branco.
Os elementos da árvore do documento casados por um seletor são o alvo do seletor. Um seletor constituído por uma sequência de seletores simples representa todos os elementos com os quais casa. Acresentando-se, no início da cadeia, outra sequência de seletores simples e sinais de combinação criamos condições adicionais de casamento. Assim, o alvo do seletor é sempre um subconjunto dos elementos casados pela última sequência de seletores simples.
Um seletor vazio que não contém uma sequência de seletores simples nem pseudoelementos é um seletor inválido.
É válido inserir caracteres escapados em um seletor com uso de uma barra invertida segundo as mesmas regras de escape das CSS. [CSS21].
Alguns seletores suportam prefixos para namespaces. O mecanismo para declarar namespaces deve ser especificado pela linguagem que usa os seletores. Se a linguagem não admite ou não especifica namespaces então eles não devem ser usados. Em CSS prefixos para namespaces são declarados conforme a regra @namespace
. [CSS3NAMESPACE]
Uma lista de seletores separados por vírgula é chamada de grupamento de seletores e casa com todos os elementos da lista. (O caractere vírgula é U+002C.) Por exemplo: em CSS quando vários seletores compartilham uma mesma declaração de estilo eles podem ser agrupados em uma lista e separados por vírgula. É permitido espaço em branco antes e/ou depois de cada vírgula.
Exemplo CSS:
Nesse exemplo resumimos em uma, três regras CSS com declarações idênticas. Assim,
h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }
é equivalente a:
h1, h2, h3 { font-family: sans-serif }
Atenção: a equivalência é verdadeira no exemplo mostrado, porque todos os três seletores são válidos. Se um dos seletores não for válido, todo o grupamento será invalidado. No exemplo a seguir, para o primeiro conjunto de regras CSS somente uma das regras para cabeçalho é inválida (aquela para o cabeçalho h2), enquanto que para o agrupamento de seletores a regra é inválida para todos os cabeçalhos.
Exemplo CSS inválido:
h1 { font-family: sans-serif } h2..foo { font-family: sans-serif } h3 { font-family: sans-serif }
não é equivelente a:
h1, h2..foo, h3 { font-family: sans-serif }
por ser inválido o seletor (h1, h2..foo, h3
) a regra CSS será ignorada (para o caso onde não houve agrupamento dos seletores somente a regra CSS para h2..foo
será ignorada).
Seletor tipo é o nome de um elemento da linguagem em que foi escrito o documento usando a sintaxe CSS para nomes [CSS3NAMESPACE]. Um seletor tipo representa uma instância de um tipo de elemento na árvore do documento.
Exemplo:
O seletor mostrado a seguir representa um elemento h1
na árvore do documento:
h1
Seletores tipo admitem um componente namespace opcional: um prefixo previamente declarado, colocado antes do nome do elemento, e dele separado pelo separador de namespace "uma barra vertical" (U+007C, |
). (Ver, [XML-NAMES] para uso de namespaces XML.)
O componente namespace pode ser deixado vazio (sem prefixo antes do separador) para indicar que o seletor casa somente com elementos sem namespace declarado.
Um sinal asterísco (*) pode ser usado como prefixo para namespace indicando que o seletor casa com elementos de qualquer namespace (inclusive com aqueles sem namespace).
Seletores tipo elemento que não contém o componente namespace (sem namespace e sem separador) casam com elementos sem considerar seus eventuais namespaces (são equivalentes a "*|
") exceto se tiver sido declarado um namespace padrão para os seletores (por exemplo: em CSS, nas folhas de estilos). Se um namespace padrão for declarado tais seletores casam somente com elementos pertencentes ao namespace padrão declarado.
Um seletor tipo que contenha um prefixo para namespace que não tenha sido declarado previamente, é um seletor inválido.
Em um cliente apto a aceitar namespaces, a parte que contém o nome do seletor tipo (a parte depois do separador de namespace) casa somente com a parte local do nome qualificado do elemento.
Resumindo:
ns|E
*|E
|E
E
Exemplos CSS:
@namespace foo url"//www.example.com); foo|h1 { color: blue } /* primeira regra */ foo|* { color: yellow } /* segunda regra */ |h1 { color: red } /* ... */ *|h1 { color: green } h1 { color: green }
A primeira regra (sem considerar a regra @namespace
) casa somente com elementos h1
do namespace em "//www.example.com".
A segunda regra casa com todos os elementos do namespace "//www.example.com".
A terceira regra casa somente com elementos h1
sem namespace declarado.
A quarta regra casa com elementos h1
pertencentes a qualquer namespace (inclusive aqueles sem namespace).
A última regra é equivalente à quarta uma vez que foi declarado um namespace padrão.
O seletor universal, escrito como um nome CSS qualificado [CSS3NAMESPACE] com um sinal asterísco (*
U+002A) como nome local, representa qualquer um dos seletores tipos. Representa todos os elementos do documento em qualquer namespace (inclusive aqueles sem namespace) se não tiver sido declarado um namespace padrão para seletores. Se houver um namespace padrão ver, a seguir, Seletor universal e namespaces.
Se o seletor universal representado por um *
(isto é, sem prefixo para namespaces) não for o único componente de uma sequência de seletores simples ou não for imediatamenbte seguido por um pseudoelemento, então o sinal *
pode ser omitido e a presença do seletor universal é implícita.
Exemplos:
*[hreflang|=en]
e [hreflang|=en]
são equivalentes,
*.warning
e .warning
são equivalentes,
*#myid
e #myid
são equivalentes.
Nota: recomenda-se que o sinal asterísco *
não seja omitido para evitar potencial confusão como por exemplo em:
div
:first-child
e div:first-child
. Nesse caso div *:first-child
é mais legível.
O seletor universal admite um componente namespace adicional. É usado como mostrado a seguir:
ns|*
*|*
|*
*
Um seletor universal que contenha prefixo para namespace que não tenha sido declarado previamente é um seletor inválido.
Seletores podem ser representados com base no atributo do elemento. Um seletor de atributo contém um expressão que faz uso do atributo e casa com elementos cujo atributo satisfaça a expressão.
CSS2 criou quatro tipos de seletor de atributo:
[att]
att
independentemente do seu valor.
[att=val]
att
cujo valor seja exatamente "val".
[att~=val]
att
cujo valor seja uma lista de palavras separadas por espaço em branco uma das quais seja exatamente igual a "val". Se "val" contém espaço em branco (uma vez que as palavras são separadas por espaços) ou se for uma string vazia, nada representará.
[att|=val]
att
cujo valor seja exatamente igual a "val" ou que comece com "val" imediatamente seguido pelo caractere traço "-" (U+002D). A principal finalidade desse seletor é casar com subcódigos de declaração de idiomas (por exemplo: com o atributo hreflang
no elemento a
da HTML) conforme descrito na BCP 47 ([BCP47]) ou seus sucessores. Para informações sobre subcódigos de idiomas para o atributo lang
(ou xml:lang
) consulte a pseudoclasse :lang
.
Valores de atributo devem ser identificadores CSS ou strings. [CSS21] A sensibilidadee de caixa dos nomes e valores de atributos depende da linguagem em que o documento foi escrito.
Exemplos:
O seletor de atributo mostrado a seguir casa com elementos h1
que contenham o atributo title
independentemente do seu valor:
h1[title]
No exemplo a seguir o seletor de atributo mostrado casa com elementos span
cujo atributo class
tenha o valor exatamente igual a "example":
span[class="example"]
É permitido o uso de seletores de atributos múltiplos com a finalidade de casar com elementos contendo vários atributos ou diferentes condições para o valor do mesmo atributo. No exemplo a seguir o seletor casa com os elementos span
cujo atributo hello
tem o valor exatamente igual a "Cleveland" e cujo atributo goodbye
tem o valor exatamente igual a "Columbus":
span[hello="Cleveland"][goodbye="Columbus"]
A regra CSS mostrada a seguir ilustra a diferença entre os sinais "=" e "~=" em um seletor de atributo. O primeiro seletor casa, por exemplo, com os elementos a
cujo valor do atributo rel
seja "copyright copyleft copyeditor". O segundo seletor casa com os elementos a
cujo atributo href
tenha o valor exatamente igual a "//www.w3.org/".
a[rel~="copyright"] { ... } a[href="//www.w3.org/"] { ... }
O seletor a seguir casa com os elementos a
cujo valor do atributo hreflang
é exatamente igual a "fr".
a[hreflang=fr]
O seletor a seguir casa com os elementos a
cujo valor do atributo hreflang
começa com "en",
inclusive "en", "en-US", e "en-scouse":
a[hreflang|="en"]
O seletor a seguir casa com os elementos DIALOGUE
cujo valor do atributo character
seja igual a romeo ou juliet:
DIALOGUE[character=romeo] DIALOGUE[character=juliet]
Existem três seletores para casamento com base na presença de uma substring no valor do atributo:
[att^=val]
att
começa com o prefixo "val". Se "val" é uma string vazia então não haverá casamento.
[att$=val]
att
termina com o prefixo "val". Se "val" é uma string vazia então não haverá casamento.
[att*=val]
att
contém pelo menos uma instância da substring "val". Se "val" é uma string vazia então não haverá casamento.
Valores de atributo devem ser identificadores CSS ou strings. [CSS21]. A sensibilidadee de caixa para nomes e valores de atributos depende da linguagem em que o documento foi escrito.
Exemplos:
O seletor a seguir casa com os objetos
HTML que representam uma imagem:
object[type^="image/"]
O seletor a seguir casa com os elementos HTML âncoras a
cujo valor do atributo href
termina com ".html".
a[href$=".html"]
O seletor a seguir casa com parágrafos HTML cujo valor do atributo title
contém a substring "hello"
p[title*="hello"]
Em um seletor e atributo, o nome do atributo deve estar em conformidade com os nomes qualificados para CSS: um prefixo para namespace previamente declarado pode ser acresentado no início do nome do atributo e dele separado por um separador para namespace "barra vertical"(|
). De acordo com as recomendações para Namespaces na XML, namespaces padrão não se aplicam a atributos, contudo seletores de atributo sem um componente namespace aplicam-se somente aos atributos sem namespace (equivalente a "|attr
"; tais atributos são ditos estar na condição de "per-element-type namespace partition"). Um sinal de asterísco poderá ser usado para indicar que o seletor de atributo casa com o atributo especificado independentemente do namespace a que pertença.
Um seletor de atributo que contenha um prefixo para namespace que não tenha sido declarado previamente, é um seletor inválido.
Exemplos CSS:
@namespace foo "//www.example.com"; [foo|att=val] { color: blue } [*|att] { color: yellow } [|att] { color: green } [att] { color: green }
A primeira regra CSS aplica-se somente aos elementos que contenham o atributo att
no namespace "//www.example.com" e com valor igual a "val".
A segunda regra CSS aplica-se somente aos elementos que contenham o atributo att
independentemente do namespace a que pertençam (inclusive os que não pertençam a namespace algum).
As duas últimas regras CSS são equivalentes e aplicam-se somente aos elementos que contenham o atributo att
que não pertença a namespace algum.
Seletores de atributo casam com valores de atributo na árvore do documento. Está fora do escopo desse documento considerar como a árvore do documento é construida. Em alguns formatos de documentos valores padrão de atributos podem ser definidos em uma DTD ou similar, contudo nesses casos os seletores de atributo serão efetivos apenas se constarem da árvore do documento. Selectores devem ser definidos para funcionar quer os valores padrão para atributos sejam ou não incluidos na árvore do documento.
Por exemplo um agente de usuário XML pode, mas não obrigatoriamente, ler um "subconjunto externo" da DTD, mas é obrigado a identificar valores padrão de atributos no "subconjunto interno" do documento. (Ver [XML10] para definição desses subconjuntos.) Dependendo do agente de usuário uma definição padrão de valores de atributo constante de um "subconjunto externo" poderá ou não fazer parte da árvore do documento.
Um agente de usuário que reconheça namespace XML pode, mas não obrigatoriamente usar seus mecanismos de reconhecimento de namespaces para tratar valores padrão de atributos como se eles estivessem presentes no documento. (Por exemplo: um agente de usuário XHTML não é obrigado a usar seus mecanismos de reconhecimento da DTD XHTML. Ver [XML-NAMES] para detalhes sobre namespaces na XML 1.0.)
Nota: Tipicamente as implementações ignoram subconjuntos externos. Isso equivale ao comportamento de não validação segundo as especificações para XML.
Exemplo:
Considere um elemento denominado EXAMPLE
com um atributo de nome radix
cujo valor padrão é "decimal"
.
O fragmento da DTD deverá ser como mostrado a seguir:
<!ATTLIST EXAMPLE radix (decimal,octal) "decimal">
Se a regra CSS estiver contida na folha de estilos
EXAMPLE[radix=decimal] { /*... declarações CSS padrão ...*/ } EXAMPLE[radix=octal] { /*... outras declarações CSS...*/ }
A primeira regra CSS poderá não casar com elementos cujo atributo radix
for definido por padrão, ou seja, não explicitamente definido. Para garantir o casamento com todos os elementos o valor padrão deverá ser omitido do seletor:
EXAMPLE{ /*... declarações CSS padrão ...*/ } EXAMPLE[radix=octal] { /*... outras declarações CSS...*/ }
Nesse caso, uma vez que o seletor EXAMPLE[radix=octal]
é mais específico que o seletor tipo isolado, as declarações CSS constantes da segunda regra sobrescrevem aquelas constantes da primeira regra para elementos cujo valor do atributo radix
seja "octal"
. Portanto esteja atento para o fato que declarações CSS aplicáveis somente para o caso de valor padrão do atributo serão sobrescritas pelas declarações para valores não padrão.
Em linguagem HTML o sinal "ponto" (também chamado de ponto final, U+002E, .
) é a alternativa para a sintaxe ~=
quando se trata do atributo class
. Dessa forma, em HTML as sintaxes div.value
e div[class~=value]
têm o mesmo significado. O valor do atributo deve ser imediatamente precedido de um ponto (.
).
Agentes de usuário podem aplicar seletores com uso de ponto (.) em documentos XML se os mecanismos de reconhecimento de namespace do agente de usuário permitem determinar quais são os atributos "class" do respectivo namespace. Um exemplo é a definição em uma especificação para um namespace particular (por exemplo: SVG 1.0 [SVG11] descreve um atributo SVG de classe
e como o agente de usuário deve interpretá-lo. De modo similar a MathML 1.01 [MATHML] descreve um atributo MathML de class
.)
Exemplos CSS:
Podemos aplicar estilos a todos os elementos com uma classe igual a class~="pastoral"
conforme mostrado a seguir:
*.pastoral { color: green } /* todos os elementos com class~=pastoral */
ou simplesmente
.pastoral { color: green } /* todos os elementos com class~=pastoral */
A regra CSS a seguir aplica estilos aos elementos H1 com a classe class~="pastoral"
:
H1.pastoral { color: green } /* elementos H1 com class~=pastoral */
De acordo com essas regras, no exemplo a seguir, o primeiro elemento H1
não será na cor green enquanto o segundo será:
<H1>Não será em verde</H1> <H1 class="pastoral">Será em verde</H1>
A regra CSS a seguir casa com elementos P
cujos valor do atributo class
é uma lista de valores serparados por espaço em branco e que contém os valores pastoral
e marine
:
p.pastoral.marine { color: green }
Essa regra CSS casa com class="pastoral blue aqua marine"
, mas não casa com class="pastoral blue"
.
Nota:Tendo em vista que o atributo "class" confere um poderoso mecanismo de estilização para as CSS os autores podem ser tentados a projetar seus documentos com uso de elementos sem valor de apresentação (tais como DIV
e SPAN
da HTML) e definir estilos com uso do atributo "class" inserido em tais elementos. Essa prática deve ser evitada uma vez que os elementos estruturais da linguagem são mais apropriados para estruturar um documento do que a simples atribuição de classes.
Nota: Múltiplos valores para o atributo classe de um elemento devem ser concatenados com uso de espaço em branco entre eles. Convém notar que essa situação não é normativa nessa especificação.
A linguagem para escrita dos documentos poderá conter atributos do tipo ID. A particularidade de atributos do tipo ID é que não deverá existir um atributo ID com o mesmo valor em um documento, independentemente do tipo de elemento no qual são declarados. Seja qual for a linguagem do documento um atributo ID deve ser um identificador único do elemento no qual foi declarado. Em HTML todos os atributos ID são nomeados "id"; em aplicações XML pode-se nomear atributos ID de forma diferente, contudo a exigência de ser identificador único também se aplica nesses casos.
Um atributo ID de um documento permite aos autores definir um identificador único para uma instância de um elemento na árvore do documento. Um seletor ID é formado por um "sinal tralha" (U+0023, #
) imediatamente seguido pelo valor do ID que deverá ser um nome em conformidade com os identificadores CSS. Um seletor ID casa com a instância do elemento cujo atributo ID contém o identificador único grafado no seletor.
Esse documento não especifica como um agente de usuário reconhece atributos do tipo ID em um elemento. O agente de usuário poderá, por exemplo, buscar essa informação na DTD do documento ou perguntar ao usuário.
Exemplos:
O seletor ID mostrado a seguir casa com o elemento h1
cujo valor do atributo ID seja "chapter1":
h1#chapter1
O seletor ID mostrado a seguir casa com o elemento cujo valor do atributo ID seja "chapter1"
#chapter1
O seletor ID mostrado a seguir casa com o elemento cujo valor do atributo ID seja "z98y".
*#z98y
Nota: Em XML 1.0 [XML10] a informação sobre qual atributo contém ID para um elemento encontra-se na DTD ou na schema. Ao parsear XML os agentes de usuário nem sempre lêem a DTD e assim, podem não saber qual é o ID de um elemento (embora os mecanismos de namespace do agente de usuário sejam capazes de determinar qual são os atributos ID para aquele namespace.) Se o autor de uma folha de estilos suspeitar que o agente de usuário é incapaz de identificar atributos ID ele deverá evitar seu uso e usar seletores de atributo normais tal como: [name=p371]
no lugar de #p371
.
Em documentos que usem uma mistura de xml:id, DOM3 Core, XML DTDs e namespaces específicos, um elemento com múltiplos ID pode ser casado com seletores para cada um dos IDs.
Pseudoclasses foram criadas para casar baseadas em informações que não se encontram na árvore do documento ou que não possam ser casadas por seletores simples.
A sintaxe para uma pseudoclasse consiste em um sinal de "dois pontos" (:
)
seguido pelo nome da paseudoclasse e opcionalmente por um valor entre parenteses.
Pseudoclasses são permitidas em qualquer sequência de seletores simples contidas em um seletor. São permitidas em qualquer posição em uma sequência de seletores simples depois do seletor tipo inicial ou do seletor universal (possivelmente omitido). Nomes de peudoclasses são insensíveis ao tamanho de caixa. Algumas pseudoclases são mutuamente exclusivas, enquanto outras podem ser aplicadas simultaneamente a um elemento. Pseudoclasses podem ser dinâmicas no sentido de que um elemento pode adquirir ou perder a pseudoclasse de acordo com interação do usuário.
Pseudoclasses dinâmicas, para realizar o casamento com elementos, se baseiam em características dos elementos que não são encontradas em seus nomes, atributos ou conteúdo e a princípio em características que não podem ser deduzidas a partir da árvore do documento .
Pseudoclasses dinâmicas não constam da marcação do documento e nem da sua árvore.
Agentes de usuário, por padrão, renderizam links visitados e não visitados de forma diferenciada. Essa especificação prevê as pseudoclasses :link
e :visited
para fazer distinção entre eles:
:link
casa com links não visitados.
:visited
casa com links já visitados pelo usuário.
Decorrido determinado período de tempo os agentes de usuário podem reverter a apresentação de links visitados para não visitados retornando-os ao estado ‘:link
’.
Os dois estados são mutuamente exclusivos.
Exemplo:
O seletor mostrado a seguir casa com links cujo valor do atributo class seja external
e já tenham sido visitados:
a.external:visited
Nota: É possível aos autores de folhas de estilo usar essas pseudoclasses para determinar, sem o consentimento do usuário, quais os links que ele visitou.
Os agentes de usuário devem tratar todos os links como não visitados ou implementar mecanismos que preservem a privacidade do usuário caso apresentem esses estados dos links diferenciadamente.
Agentes de usuário interativos, em determinadas situações, mudam a renderização em resposta a ações do usuário. Essa especificação prevê três pseudoclasses para responder a ação do usário.
:hover
é aplicada ao elemento que recebe o ponteiro de um dispositivo apontador, sem ser necessariamente ativado. Por exemplo: um agente de usuário visual poderá aplicar essa pseudoclasse a um box quando o cursor do mouse for colocado sobre o box. Agentes de usuário que não suportam mídia interativa não são obrigados a suportar essa pseudoclasse. Alguns agentes de usuário que suportam mídia interativa podem não suportar essa pseudoclasse (por exemplo: um dispositivo de pena para o qual o agente não consiga detectar a ação sobre o elemento).
:active
é aplicada quando o usuário ativa um elemento. Por exemplo: durante o tempo em que o usuário pressiona e solta o botão do mouse. Em sistemas com mais de um botão do mouse a pseudoclasse :active
aplica-se somente ao botão primário de ativação (tipicamente o botão "esquerdo" do mouse).
:focus
aplica-se enquanto o elemento recebe o foco (eventos de teclado ou de mouse ou outras formas de entrada).
Os estados de ativação e de recebimento de foco :active
e :focus
têm seus limites ditados pela linguagem ou por características próprias das implementações.
Essas pseudoclasses não são mutuamente exclusivas. Um elemento pode ser casado por várias pseudoclasses ao mesmo tempo.
Essa especificação não define se o elemento pai deve ou não receber as pseudoclasses ‘:active
’ ou ‘:hover
’.
Nota:Se a pseudoclasse ‘:hover
’ for aplicada a um elemento porque seu elemento filho recebeu o ponteiro de um dispositivo apontador então será possível aplicar o estado ‘:hover
’ a um elemento que não esteja sob o ponteiro do dispositivo.
Exemplos:
a:link/* links não visitados */ a:visited /* links visitados */ a:hover /* ponteiro sobre */ a:active /* links ativados */
Exemplo de combinação de pseudoclasses:
a:focus a:focus:hover
O último seletor casa com elementos a
que estão na pseudoclasse :focus e na :hover.
Nota: Um elemento pode estar em duas pseudoclasses ‘:visited
’ e ‘:active
’ (ou ‘:link
’ e ‘:active
’).
Alguns URIs apontam para um determinado local do seu destino. Esses tipos de URI terminam com o "sinal tralha" (#) seguido de um identificador (chamado de fragmento identificador).
URIs com fragmento identificador apontam para um determinado elemento do seu documento destino conhecido como elemento alvo (target element). No exemplo a seguir o URI aponta para uma âncora, denominada section_2
, em um documento HTML:
Um elemento alvo pode ser casado com a pseudoclasse
:target
. Se no URI não existe um fragmento identificador então não há elemento alvo no documento destino.Exemplo:
p.note:targetEsse seletor casa com o elemento
p
contendo a classenote
que seja o alvo referenciado em um URI.Exemplo CSS:
No exemplo a seguir foi usada a pseudoclasse
:target
para estilizar o elemento alvo na cor red e inserir uma imagem antes dele:*:target { color : red } *:target::before { content : url(target.png) }6.6.3. Pseudoclasse :lang
Se o documento for marcado especificando-se qual é o idioma do conteúdo de elementos escritos em idioma diferente daquele em que o documento foi escrito será possível escrever seletores baseados em idioma. Por exemplo: em HTML [HTML401] o idioma é definido por uma combinação do atributo
lang
e possivelmente por informações contidas na tagmeta
ou em protocolos (tais como nos cabeçalhos HTTP). XML se utiliza de um atributo denominadoxml:lang
e poderão existir outros mecanismos, em diferentes linguagens de marcação, para determinação do idioma.A pseudoclasse
:lang(C)
casa com os elementos cujo atributo para determinação do idioma tenha sido marcado com o valor C. Se o elemento contém o atributo:lang()
o seletor se baseia somente no valor desse atributo (se necessário, normatizado segundo a sintaxe BCP 47) que no exemplo é o identificador C ou pode ainda começar com C e ser imediatamente seguido por "-" (U+002D). O valor desse atributo é insensível ao tamanho de caixa. Não é obrigatório que o valor C seja igual a um nome de idioma válido.C deve ser um identificador CSS [CSS21] válido e não vazio. (Caso contrário o seletor será inválido.)
Nota: Recomenda-se que documentos e protocolos indiquem o idioma segundo os códigos definidos nas BCP 47 [BCP47] ou seu sucessor, como por exemplo, com uso do atributo "xml:lang" no caso de documentos compatíveis com XML [XML10]. Ver "FAQ: Códigos para idiomas com duas ou três letras."
Exemplos:
Os dois primeiros seletores a seguir casam com documentos que tenham sido escritos em idioma francês da Bélgica ou Alemão e os dois seguintes casam com elementos
q
filhos de elementos que tenham sido marcados com aqueles idiomas.html:lang(fr-be) html:lang(de) :lang(fr-be) > q :lang(de) > qA diferença entre a pseudoclasse
:lang(C)
e o operador ‘|=
’ é que o mecanismo de comparação para verificar o casamento adotado pelo operador ‘|=
’ verifica somente o atributo enquanto a pseudoclasse:lang(C)
considera os macanismos do agente de usuário relativos à semântica dos idiomas para verificar o casamento.No exemplo HTML a seguir somente o elemento BODY é casado por
[lang|=fr]
(pelo fato de que existe o atributo LANG no elemento), mas a pseudoclasse:lang(fr)
casa com os elementos BODY e P (pelo fato de que ambos estão escritos em francês). O operador[lang|=fr]
não casa com P, pois nele não existe um atributo LANG.<body lang=fr> <p>Je suis français.</p> </body>6.6.4. Pseudoclasse para o estado de um elemento da interface de usuário
6.6.4.1. Pseudoclasses :enabled e :disabled
A pseudoclasse
:enabled
casa com elementos da interface de usuário que estejam habilitados, tipicamente elementos que podem ser desabilitados.Ao contrário, a pseudoclasse
:disabled
casa com elementos da interface de usuário que estejam desabilitados, tipicamente elementos podem ser habilitados.O que define um elemento de interface e os estados habilitado e desabilitado são os macanismos internos da linguagem do documento. Em um documento típico a maioria dos elementos não admite os estados
:enabled
ou:disabled
.Nota: Propriedades CSS que interferem com a habilidade do usuário em interagir com um elemento da interface não influenciam o casamento para os estados
:enabled
ou:disabled
; por exemplo: as propriedades CSSdisplay
evisibility
não têm efeito sobre os estados habilitado/desabilitado de um elemento.6.6.4.2. Pseudoclasse :checked
Elementos radio e checkbox podem ser marcados e desmarcados pelo usuário. Alguns itens de menu assumem o estado "checked" quando selecionados pelo usuário. Quando tais elementos são colocados em estado "on" a pseudoclasse
:checked
é aplicada. A pseudoclasse:checked
é, por natureza, dinâmica e pode ser alterada por ação do usuário ou pela presença do atributo na marcação e aplica-se a qualquer tipo de mídia. Por exemplo: a pseudoclasse:checked
aplica-se inicialmente a todo elemento HTML4 que tenha os atributosselected
echecked
como descrito em na Seção 17.2.1 do HTML4, contudo, é óbvio, o usuário poderá mudar para o estado "off" e, então, a pseudoclasse:checked
não mais será aplicada.6.6.4.3. Pseudoclasse :indeterminate
Nota:Elementos radio e checkbox podem ser marcados pelo usuário, contudo em alguns casos podem assumir um estado indeterminado, ou seja não estão marcados e nem desmarcados. Isso poderá acontecer por definição em um atributo ou por manipulação do DOM.
Futuras versões dessa especificação criarão a pseudoclasse
:indeterminate
para aplicação nesses casos.6.6.5. Pseudoclasses estruturais
Essa especificação criou o conceito de pseudoclasse estrutural que permite casamento baseado em informações que se encontram na árvore do documento, mas que não podem ser acessadas com uso de seletores simples ou elementos de combinação.
Estão nessa categoria oa textos isolados e os nós que não sejam possíveis de serem contados levando em consideração sua posição na marcação como elemento filho. Ao calcular a posição de um elemento filho o índice de contagem começa no número 1.
6.6.5.1. Pseudoclasse :root
A pseudo classe
:root
casa com o elemento raiz do documento. Em HTML 4 o elemento raiz é o elementoHTML
.6.6.5.2. Pseudoclasse :nth-child()
A pseudoclasse
:nth-child(a
casa com o elemento que tem an
+b)n
+b-1 elementos antes dele na árvore do documento, para todon
inteiro positivo ou zero e que possua um elemento pai. Para valores de a e b maiores que zero os elementos filhos são divididos em dois grupos de a elementos (o segundo grupo fica com mais um se o total de elementos for ímpar) e a seleção se faz para o bésimo elemento de cada grupo. Por exemplo: esse mecanismo permite que o seletor case com linhas alternadas de uma tabela e poderá ser usado para alternar a cor de um grupo de parágrafos em um ciclo de quatro parágrafos. Os valores de a e b devem ser números inteiros (positivo, negativo, ou zero). O índice do primeiro elemento filho é 1.Além de uma expressão a pseudoclasse
:nth-child()
admite os valores ‘’ e ‘
odd
’ como argumento. ‘
even
’ (ímpar) tem o mesmo significado de
odd
2n+1
, e ‘’ (par) é o mesmo que
even
2n
.O argumento da pseudoclasse
:nth-child()
deve estar de acordo com a gramática a seguir na qualINTEGER
está na faixa[0-9]+
e o restante do token deve estar de acordo com o escaneamento léxico tratado na seção 10.2:nth : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* ;Exemplos:
tr:nth-child(2n+1) /* casa com linhas ímpares de uma tabela HTML */ tr:nth-child(odd) /* idem */ tr:nth-child(2n+0) /* casa com linhas pares de uma tabela HTML */ tr:nth-child(even) /* idem */ /* Alterna as cores dos parágrafos */ p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; }Quando o valor b é precedido por um sinal de menos, o caractere "+" deve ser removido da expressão (substituido pelo sinal "-" indicando valor negativo para b).
Exemplos:
:nth-child(10n-1) /* casa com os elementos de ordem 9, 19, 29, etc. */ :nth-child(10n+9) /* idem */ :nth-child(10n+-1) /* Sintaxe inválida que será ignorada */Se a=0, a
n
não precisa ser incluída (exceto se b já tiver sido omitido). Se an
não existir e b não for negativo o sinal+
antes de b (quando permitido) pode ser omitido. Nesse caso a sintaxe fica simplificada para:nth-child(b)
.Exemplos:
foo:nth-child(0n+5) /* casa com o elemento foo que ocupa a ordem 5 como elemento filho */ foo:nth-child(5) /* idem */Se a=1, ou a=-1, o número deve ser omitido.
Exemplos:
Os seguintes seletores são equivalentes:
bar:nth-child(1n+0) /* casa com todos os elementos bar, especificidade (0,1,1) */ bar:nth-child(n+0)/* idem */ bar:nth-child(n) /* idem */ bar /* idem mas com especificidade menor (0,0,1) */Se b=0, o casamento é com cada aésimo elemento. Nesses casos +b (ou -b) pode ser omitido exceto se a já tiver sido omitido.
Exemplos:
tr:nth-child(2n+0) /* casa com linhas pares de uma tabela HTML */ tr:nth-child(2n) /* idem */É permitido espaço em branco depois de "(" e antes de ")" bem como em ambos os lados do sinal "+" e "-" para separar as partes a
n
e b quando presentes.Exemplos válidos com uso de espaço em branco:
:nth-child( 3n + 1 ) :nth-child( +3n - 2 ) :nth-child( -n+ 6) :nth-child( +6 )Exemplos inválidos com uso de espaço em branco:
:nth-child(3 n) :nth-child(+ 2n) :nth-child(+ 2)Se a e b forem iguais a zero não há casamento com elementos da árvore do documento.
O valor de a pode ser negativo, mas somente valores positivos da expressão a
n
+b paran
≥0 casa com elementos na árvore do documento.Exemplo:
html|tr:nth-child(-n+6) /* casa com as 6 primeiras linhas de uma tabela HTML */6.6.5.3. Pseudoclasse :nth-last-child()
A pseudoclasse
:nth-last-child(an+b)
casa com o elemento que tem an
+b-1 elementos irmão (filhos do mesmo elemento pai) depois dele na árvore do documento, para qualquer valor den
interior positivo ou zero. Ver a pseudoclasse:nth-child()
para sintaxe e argumentos. Essa pseudoclasse aceita os valores ‘’ e ‘
even
’ como argumentos.
odd
Exemplos:
tr:nth-last-child(-n+2) /* casa com as duas últimas linhas de uma tabela HTML */
foo:nth-last-child(odd) /* casa com todos os elementos foo de ordem ímpar, filhos do mesmo elemento pai, contando-se do final para o início */6.6.5.4. Pseudoclasse :nth-of-type()
A pseudoclasse
:nth-of-type(an+b)
casa com o seu elemento irmão do mesmo tipo, que ocupa a posição an
+b-1 antes dele na árvore do documento, para todo valor zero ou inteiro positivo den
. Ver a pseudoclasse:nth-child()
para sintaxe e argumentos. Essa pseudoclasse aceita os valores ‘’ e ‘
even
’ como argumentos.
odd
Exemplo CSS:
O exemplo mostrado a seguir permite alternar a posição de imagens flutuadas:
img:nth-of-type(2n+1) { float: right; } img:nth-of-type(2n) { float: left; }6.6.5.5. Pseudoclasse :nth-last-of-type()
A pseudoclasse
:nth-last-of-type(an+b)
casa com o seu elemento irmão do mesmo tipo, que ocupa a posição an
+b-1 depois dele na árvore do documento, para todo valor zero ou inteiro positivo den
. Ver a pseudoclasse:nth-child()
para sintaxe e argumentos. Essa pseudoclasse aceita os valores ‘’ e ‘
even
’ como argumentos.
odd
Exemplo:
O seletor do exemplo a seguir casa com todos os elementos
h2
filhos debody
em um documento XHTML exceto os primeiro e último elementos:body > h2:nth-of-type(n+2):nth-last-of-type(n+2)Nesse exemplo podríamos usar
:not()
, embora o seletor seja de comprimento maior:body > h2:not(:first-of-type):not(:last-of-type)6.6.5.6. Pseudoclasse :first-child
Esse seletor é igual a
:nth-child(1)
. A pseudoclasse:first-child
casa com o elemento que é o primeiro filho do seu elemento pai.Exemplos:
O seletor do exemplo a seguir casa com o elemento
p
, primeiro filho do elementodiv
:div > p:first-childNo fragmento de código a seguir o casamento se dará com o elemento
p
marcado dentro do elementodiv
:<p> Último P antes da nota.</p> <div class="note"> <p> Primeiro P dentro da nota.</p> </div>mas não casa com op
do fragmento a seguir:<p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> Último P identro da nota.</p> </div>Os seguintes seletores são equivalentes:
* > a:first-child /* a é o primeiro filho de qualquer elemento */ a:first-child /* idem (supondo que a não é o elemento raiz) */6.6.5.7. Pseudoclasse :last-child
Essa pseudoclasse tem o mesmo efeito que
:nth-last-child(1)
. A pseudoclasse:last-child
casa com o elemento último filho do seu elemento pai.Exemplo:
O seletor mostrado a seguir casa com o último item
li
da lista ordenadaol
.ol > li:last-child6.6.5.8. Pseudoclasse :first-of-type
Essa pseudoclasse tem o mesmo efeito que
:nth-of-type(1)
. A pseudoclasse:first-of-type
casa com o elemento que é o seu primeiro irmão do mesmo tipo entre os elementos filhos de um mesmo elemento pai.Exemplo:
O seletor mostrado a seguir casa com o termo de definição
dt
de uma lista de definiçãodl
sendo essedt
o primeiro filho do seu tipo na lista.dl dt:first-of-typeNo exemplo a seguir o casamento acontece para os dois primeiros elementos
dt
, mas não acontece para o terceiro:<dl> <dt>gigogne</dt> <dd> <dl> <dt>fusée</dt> <dd>multistage rocket</dd> <dt>table</dt> <dd>nest of tables</dd> </dl> </dd> </dl>6.6.5.9. Pseudoclasse :last-of-type
Essa pseudoclasse tem o mesmo efeito que
:nth-last-of-type(1)
. A pseudoclasse:last-of-type
casa com o elemento que é o último elemento irmão do seu tipo entre os elementos filhos de um mesmo elemento pai.Exemplo:
O seletor a seguir casa com a última célula
td
da linhatr
de uma tabela.tr > td:last-of-type6.6.5.10. Pseudoclasse :only-child
Esta pseudoclasse casa com o elemento que é filho único do seu elemento pai. É o mesmo que
:first-child:last-child
ou:nth-child(1):nth-last-child(1)
, mas com menor especificidade.6.6.5.11. Pseudoclasse :only-of-type
Esta pseudoclasse casa com o elemento que é o único filho do seu tipo, do mesmo elemento pai. É o mesmo que
:first-of-type:last-of-type
ou:nth-of-type(1):nth-last-of-type(1)
, mas com menor especificidade.6.6.5.12. Pseudoclasse :empty
A pseudoclasse
:empty
casa com em elemento que não tenha filhos. Em termos de árvore do documento somente nós elemento e nós conteúdo (tais como nós de texto, nós CDATA, e referências a entidades do DOM [DOM-LEVEL-3-CORE]) cuja propriedade length não seja zero são capazes de satisfazer a condição de não vazio; comentários, instruções de processamento e outros tipos de nós não são considerados para determinar a condição de preenchimento ou não de um elemento.Exemplos:
p:empty
casa com o seguinte fragmento de código:<p></p>
foo:empty
não casa com nada no seguinte fragmento de código:<foo>bar</foo><foo><bar>bla</bar></foo><foo>this is not <bar>:empty</bar></foo>6.6.6. Em branco
Esse item foi deixado em branco intencionalmente. (Antes essa seção definia a pseudoclasse
:contains()
.)6.6.7. Pseudoclasse negação
A pseudoclasse negação
:not(X)
é uma notação funcional cujo argumento é um seletor simples (exceto a própria pseudoclasse negação).Não é permitido aninhamento dessa pseudoclasse;
:not(:not(...))
é inválida. Notar que uma vez que pseudoelementos não são seletores simples eles também não são válidos como argumento da pseudoclasse:not()
.Exemplos:
O seletor mostrado a seguir casa com todos oa elementos
button
de um documento HTML que não estejam desabilitados.button:not([DISABLED])O seletor mostrado a seguir casa todos os elementos exceto com os elementos
FOO
.*:not(FOO)O seletor mostrado a seguir casa com todos os elementos HTML exceto com elementos link.
html|*:not(:link):not(:visited)Declaração padrão de namespace não afeta o argumento dessa pseudoclasse exceto se o argumento for o seletor universal ou um seletor tipo.
Exemplos:
Suponha que o namespace padrão esteja em "//example.com/"; o seletor mostrado a seguir casa com todos os elementos que não pertençam àquele namespace:
*|*:not(*)O seletor mostrado a seguir casa com qualquer elemento que não tenha recebido o ponteiro do mouse sobre ele independentemente do namespace a que pertençam. Convém notar que não somente os elementos que pertençam ao namespace padrão como também os que não pertencem não serão casados pelo seletor quando o ponteiro do mouse for colocado sobre eles.
*|*:not(:hover)Nota: A pseudoclasse :not() permite escrever seletores de utilidade duvidosa. Por exemplo:
:not(*|*)
que não casa com qualquer elemento oufoo:not(bar)
que é equivalente afoo
, mas com maior especificidade.7. Pseudoelementos
Pseudoelementos casam com porções abstratas do documento que não podem ser acessadas na árvore do documento e nem definidas pela linguagem em que o documento foi escrito. Por exemplo, linguagens de marcação não oferecem um mecanismo para acessar a primeira letra ou a primeira linha do conteúdo textual de um elemento. Os pseudoelementos permitem aos autores acessar tais partes do documento, bem como acessar conteúdos que não constam da marcação do documento (por exemplo: os pseudoselementos
::before
e::after
permitem acesso a conteúdos gerados com uso das CSS).Um pseudoelemento tem sua sintaxe constituída por um sinal duplo de dois pontos (
::
) seguido pelo nome do pseudoelemento.A notação de dois pontos
::
foi criada por essa especificação com a finalidade de estabelecer diferença na sintaxe para pseudoclasses e pseudoelementos. Por razões de compatibilidade com folhas de estilos já existentes, os agentes de usuário devem suportar as duas notações (:) e (::) quando se trata dos pseudoelementos criados pelas CSS níveis 1 e 2 (são eles:first-line
,:first-letter
,:before
e:after
). Essa exigência de compatibilidade não se aplica aos novos pseudoelementos criados por essa especificação.É permitido apenas um pseudoelemento por seletor, e, se presente deverá ser colocado depois de uma sequência de seletores simples que represente o alvo do seletor . Nota: Futuras versões dessa especificação poderão prever múltiplos pseudoelementos por seletor.
7.1. Pseudoelemento ::first-line
O pseudo elemento
::first-line
casa com o conteúdo da primeira linha formatada de um elemento.Exemplo CSS:
p::first-line { text-transform: uppercase }A regra mostrada diz o seguinte "altere para caixa alta as letras da primeira linha de cada elemento
p
".O seletor
p::first-line
não casa com qualquer um dos elem,entos de um documento. Ele casa com um pseudoelemento que o agente de usuário insere no começo de cada elementop
.Notar que o comprimento da cada linha depende de uma série de fatores, tais como a largura do documento e o tamanho da fonte entre outros. Assim, um parágrafo HTML como mostrado a seguir:
Nota do tradutor: Os textos que ilustram o exemplo permanecem em inglês propositadamente, para não interferir com o mecanismo de aplicação do pseudoelemento.
<P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>poderá ser renderizado como mostrado a seguir:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.Esse parágrafo será "reescrito" pelo agente de usuário para incluir uma sequência fictícia de tags para
::first-line
. Tal sequência de tags demosntra como as propriedades são herdadas.<P><P::first-line> This is a somewhat long HTML paragraph that </P::first-line> will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>Se um pseudoelemento divide um elemento o efeito pode ser descrito com uso de uma sequência fictícia de tags que fecha e reabre o elemento. Assim se marcarmos o parágrafo mostrado anteriormente com um elemento
span
:<P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>o agente de usuário poderá simular pontos de início e fim para a tag
span
quando da inserção da sequência fictícia de tags para::first-line
.<P><P::first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P::first-line><SPAN class="test"> be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>7.1.1. Definição de primeira linha formatada segundo as CSS
Em CSS o pseudoelemento
::first-line
só terá efeito quando declarado para um container tipo nível de bloco, tais como block-box, inline-block, table-caption, ou table-cell.A primeira linhas formatada de um elemento ocorre dentro um bloco descendente no fluxo normal do conteúdo (ou seja, um block-level descendente que não se encontre fora do fluxo por ter sido flutuado ou posicionado). Por exemplo: a primeira linha do elemento
DIV
na marcação<DIV><P>This line...</P></DIV>
é a primeira linha do elementoP
(supondo queP
eDIV
são block-level).A primeira linha de table-cell ou inline-block não poderá ser a primeira linha formatada de seu elemento ancestral. Assim, na marcação
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
a primeira linha formatada doDIV
não é a linha "Hello".Nota: Notar que no fragmento de marcação:
<p><br>First...
a primeira linha do elementop
não contém qualquer letra (supondo que ao elementobr
tenha sido aplicado o estilo padrão da HTML 4). A palavra "First" não se encontra na primeira linha formatada .O agente de usuário pode atuar como se a tag de abertura fictícia do pseudoelemento
::first-line
estivesse aninhada dentro elemento block-level mais interior. (Como CSS1 e CSS2 são omissos nesses casos, os autores não devem supor esse comportamento). Por exemplo: a sequência fictícia de tags na marcação a seguir<DIV> <P>First paragraph</P> <P>Second paragraph</P> </DIV>é a seguinte
<DIV> <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> <P><P::first-line>Second paragraph</P::first-line></P> </DIV>O peseudoelemento
::first-line
é similar a um elemento inline-level com algumas restrições. As seguintes propriedades CSS se aplicam ao pseudo elemento::first-line:
color, background, ‘word-spacing
’, ‘letter-spacing
’, ‘text-decoration
’, ‘vertical-align
’, ‘text-transform
’, ‘line-height
’. Os agentes de usuário poderão aplicar outras propriedades.A herança CSS para as propriedades CSS definidas para o pseudoseletor
::first-line
aplica-se aos elementos filhos que ocorram dentro da primeira linha do pseudoelemento::first-line
. Para as demais propriedades CSS a herança é passada pelo elemento pai do pseudoelemento. (Elementos filhos que não ocorram dentro da primeira linha herdam as propriedades do elemento pai.)7.2. Pseudoelemento ::first-letter
O pseudoelemento
::first-letter
casa com a primeira letra do conteúdo textual de um elemento caso tal conteúdo não seja precedido por qualquer outro elemento (tais como, imagens e inline tables) na sua linha. O pseudoelemento ::first-letter deve ser usado para "inicial caps" e "drop caps" que são efeitos tipográficos comuns.Pontuação (isto é, caracteres definidos em Unicode nas classes "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) e "other" (Po) ), que preceda ou siga a primeira letra deverá se incluida como integrante do pseudoelemento. [UNICODE]
Dígito, tais como, o dígito "6" na frase "67 milhões de dólares é muito dinheiro é parte integrante do pseudoelemento
::first-letter.
Nota: Em alguns casos o paeudoelemento
::first-letter
poderá incluir mais do que simplesmente o primeiro caractere não pontuação da linha. Por exemplo: em uma combinação de carcteres contendo um caractere base. Adicionalmente algumas linguagens de marcação poderão estabelecer regras próprias de tratamento das combinações de caracteres. O agente de usuário deverá ser capaz de tratar convenientemente "grapheme cluster" (caractere representado por mais de um caractere - ver UAX29) no que diz respeito a sua inclusão no pseudoelemento::first-letter
. Por exemplo: em língua alemã se a combinação das letras "ij" ocorrer no início do conteúdo textual de um elemento ambas as letras devem ser consideradas como pertencentes ao pseudo elemento::first-letter
. [UAX29]Se as letras que constituem
::first-letter
não pertencem ao mesmo elemento, como a letra "‘T"
em<p>'<em>T...
, o agente de usuário deverá criar um paseudoelemento::first-letter
a partir de um dos elementos, de ambos os elementos, ou simplesmente não criar um pseudoelemento.De modo similar, se a primeira letra(s) de um bloco não estiver no início da linha (por exemplo: em consequência a um reordenamento biderecional) então o agente de usário não será obrigado a criar o pseudoelemento(s).
Exemplo:
A CSS e a marcação HTML mostradas a seguir ilustram como a sobreposição de pseudoelementos deverá ser tratada. A primeira letra de cada elemento parágrafo P será na cor ‘
green
’ com tamanho de fonte igual a ’24pt'. |O restante da primeira linha formatada será na cor ‘blue
’ e o restante do parágrafo na cor ‘red
’.p { color: red; font-size: 12pt } p::first-letter { color: green; font-size: 200% } p::first-line { color: blue } <P>Some text that ends up on two lines</P>Supondo uma quebra de linha antes da palavra "ends", a sequência fictícia de tags para este fragmento de marcação será como mostrado a seguir:
<P> <P::first-line> <P::first-letter> S </P::first-letter>ome text that </P::first-line> ends up on two lines </P>Notar que o pseudoelemento
::first-letter
está dentro de::first-line
. As propriedades definidas para::first-line
serão herdadas por::first-letter
, mas serão sobrescritas se a mesma propriedade for definida para::first-letter
.A primeira letra deverá ocorrer dentro da primeira linha formatada. Por exemplo: no seguinte fragmento de marcação:
<p><br>First...
a primeira linha não contém qualquer letra e assim o pseudoelemento::first-letter
não cas com ninguém (supondo que ao elementobr
são aplicados os estilos padrão da HTML 4). Em particular, não há casamento com a letra "F" da palavra "First."7.2.1. Aplicações CSS
Em CSS o pseudoelemento
::first-letter
aplica-se a containers nível de bloco e a elementos tipo list-item, table-cell, table-caption e inline-block. Nota: Futuras versões dessa especificação poderão prever aplicação de pseudoelementos a outros tipos de modelo de formatação.O pseudoelemento
::first-letter
a todo elemento que contenha texto ou cujo descendente no mesmo fluxo contenha texto. Agentes de usuário devem inserir a sequência fictícia de tags para determinação do pseudoelemento ::first-letter antes do primeiro texto do elemento mesmo que tal texto pertença a um elemento descendente.Exemplo:
A sequência fictía de tags para o fragmento de código mostrado a seguir:
<div> <p>The first text.é:
<div> <p><div::first-letter><p::first-letter>T</...></...>he first text.Em CSS a primeira letra de uma table-cell ou de um inline-block não poderá ser a primeira letra de um elemento ancestral. Assim, na marcação
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
a primeira letra deDIV
não é a letra "H". Na verdade, o elementoDIV
não tem uma primeira letra.Se um elemento é do tipo list-item (‘
display: list-item
’), o pseudoelemento::first-letter
aplica-se à primeira letra do box principal após o marcador da lista. Agentes de usuário devem ignorar o pseudoelemento::first-letter
em itens de lista com ‘list-style-position: inside
’. Se um elemento contém conteúdo definido com uso de::before
ou::after
o pseudoelemento::first-letter
aplica-se à primeira letra do elemento considerando aquele conteúdo.Exemplo:
Tendo sido aplicada a regra
p::before {content: "Note: "}
, o seletorp::first-letter
casa com a letra "N" de "Note".Em CSS o pseudoelemento ::first-line e similar a um elemento nível inline element se a sua propriedade ‘
float
’ for ‘none
’; ao contrário, será similar a um elemento flutuado. As propriedades CSS aplicáveis ao pseudoelemento::first-letter
são: propriedades para fontes, ‘text-decoration
’, ‘text-transform
’, ‘letter-spacing
’, ‘word-spacing
’ (quando apropriado), ‘line-height
’, ‘float
’, ‘vertical-align
’ (somente se ‘float
’ for ‘none
’), propriedades para margens, padding, border, color e background. Os agentes de usuário poderão aplicar outras propriedades. Para renderização apropriada dos efeitos tipográficos "drop cap" ou "initial cap" os agentes de usuário devem aplicar por padrão as propriedades CSS line-height, width e height baseados no formato da letra ao contrário do que acontece para elementos normais para os quais não cabem tais considerações de estilização.Exemplo:
Os códigos CSS e HTML mostrados a seguir ilustram uma possível renderização do efeito "initial cap". Notar que a propriedade ‘
line-height
’ herdada do pseudoelemento::first-letter
é 1.1, contudo o agente de usuário computou a altura da primeira letra sem considerar a herança de modo a não deixar espaçamento extra entre as duas primeiras linhas. Observe ainda que a tag fictícia de abertura da primeira letra encontra-se dentro do elemento span e o valor da propriedade font weight da primeira letra é normal e não bold como para o span:p { line-height: 1.1 } p::first-letter { font-size: 3em; font-weight: normal } span { font-weight: bold } ... <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> Erbarremt over my en mijn benaeuwde vesten<br> En arme burgery, en op mijn volcx gebed<br> En dagelix geschrey de bange stad ontzet.
![]()
As regras CSS mostradas a seguir farão com que o efeito "drop cap" para a letra inicial faça sua altura ocupar duas linhas:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 1.2 } P::first-letter { font-size: 200%; font-weight: bold; float: left } SPAN{ text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>O exemplo mostrado será renderizado como mostrado a seguir:
A sequência fictícia de tags é como mostrada a seguir :
<P> <SPAN> <P::first-letter> T </P::first-letter>he first </SPAN> few words of an article in the Economist. </P>Notar que as tags fictícias do pseudoelemento
::first-letter
estão adjacentes ao conteúdo (ou seja, o caractere inicial) enquanto as tags fictícias do pseudoelemento ::first-line está logo após a tag inicial que marca o elemento nível de bloco.Com o objetivo de apresentar apropriadamente o efeito "drop caps" o agente de usuário deverá ajustar o tamanho das fontes, por exemplo; alinhando as linhas de base. O formato dos glifos deve ser também levado em consideração para a correta apresentação do efeito.
7.3. Em branco
Esse item foi deixado em branco intencionalmente. (Antes essa seção definia o pseudoelemento
::selection
.)7.4. Pseudoelementos ::before e ::after
Os pseudoelementos
::before
e::after
são usados para descrever conteúdos a serem adicionados antes e depois de um elemento. Eles são definidos nas CSS 2.1 [CSS21].Quando se aplica os pseudoelementos
::first-letter
e::first-line
a um elemento que receba conteúdo gerado com uso de::before
ou::after
, tais conteúdos devem ser considerados no casamento do pseudoelemento.8. Sinais de combinação
8.1. Sinal de combinação para elementos descendentes
Sinal de combinação para elementos descendentes oferece ao autor uma sintaxe capaz de casar um elemento que seja descendente de outro elemento (por exemplo: "um elemento
EM
contido em um elementoH1
"). O sinal de combinação para casar elemento descendente é um espaço em branco separando duas sequências de seletores simples. Um seletor da forma "A B
" cvasa com o elementoB
que seja um descendente qualquer do elementoA
.Exemplos:
Considere o seguinte seletor:
h1 emEsse seletor casa com o elemento
em
descendente do elementoh1
. Aplica-se ao fragmento de marcação mostrado a seguir:<h1>This <span class="myclass">headline is <em>very</em> important</span></h1>O seletor mostrado a seguir:
div * pcasa com o elemento
p
que seja neto ou descendente não direto de um elementodiv
. Notar que os espaços em branco em ambos os lados do seletor universal "*" não faz parte dele; aqueles espaços são sinais de combinação que significam que odiv
deve ser ancestral de qualquer elemento e este ancestral dep
.O seletor mostrado a seguir é uma mistura de sinal de combinação com seletor de atributo casa com o elemento que (1) possui o atributo
href
e (2) está dentro dep
que por sua vez está dentro dediv
:div p *[href]8.2. Sinal de combinação para elementos filhos
Um sinal de combinação para elementos filhos descreve a relação entre elemento pai e elemento filho. Esse sinal é o "sinal maior que " (U+003E,
>
) e separa uma sequência de dois seletores simples.Exemplos:
O seletor a seguir casa com o elemento
p
que é elemento filho do elementobody
:body > pO exemplo a seguir é uma mistura de sinais de combinação para elementos descendentes e elementos filhos.
div ol>li pO seletor mostrado casa com o elemento
p
que seja descendente do elementoli
que por sua vez e elemento filho do elementool
sendo esse descendente do elementodiv
. Notar que não usamos espaços em branco em volta do sinal de combinação ">".Para informações sobre como casar o primeiro filho de em elemento consulte a item relativo á pseudoclasse
:first-child
.8.3. Sinal de combinação para elementos irmãos
Existem dois sinais de combinação para elementos irmãos: um para irmãos adjacentes e outros para irmãos em geral. Para ambos nós que não sejam elementos (por exemplo: textos) são ignorados para efeitos de adjacência.
8.3.1. Sinal de combinação para elementos irmãos adjacentes
O sinal de combinação para elementos irmãos adjacentes é o "sinal mais " (U+002B,
+
) separando duas sequências de seletores simples. Os elementos constantes das duas sequências devem ser elementos filhos do mesmo pai na árvore do documento sendo a posição do elemento representado pela primeira sequência imediatamente anterior ao elemento representado pela segunda sequência.Exemplos:
O seletor a seguir casa com o elemento
p
imediatamente após o elementomath
:math + pO seletor a seguir é, conceitualmente, igual ao seletor anterior com a diferença da adição de um seletor de atributo — que impõe uma restrição ao elemento
h1
que agora deverá ter a classeclass="opener"
:h1.opener + h28.3.2. Sinal de combinação para elementos irmãos em geral
O sinal de combinação para elementos irmãos em geral é o "sinal til" (U+007E,
~
) separando duas sequências de seletores simples. Os elementos constantes das duas sequências devem ser elementos filhos do mesmo pai na árvore do documento sendo a posição do elemento representado pela primeira sequência anterior (mas não obrigatoriamente imediatamente anterior) ao elemento representado pela segunda sequência.Exemplo:
h1 ~ precasa com o elemento
pre
que se segue ao elementoh1
. Aplica-se ao fragmento de marcação mostrado a seguir:<h1>Definition of the function a</h1> <p>Function a(x) has to be applied to all figures in the table.</p> <pre>function a(x) = 12x/13.5</pre>9. Cálculo da especificidade de um seletor
Calcula-se a especificidade de um seletor como mostrado a seguir:
Seletores dentro da pseudoclasse negação devem ser contados como acima, contudo a negação em si não deve ser contada como uma pseudoclasse.
Feita a contagem concatene os três números a-b-c (em um sistema númerico de base alta) para obter o número que representa a especificidade.
Exemplos:
* /* a=0 b=0 c=0 -> especificidade = 0 */ LI /* a=0 b=0 c=1 -> especificidade = 1 */ UL LI /* a=0 b=0 c=2 -> especificidade = 2 */ UL OL+LI /* a=0 b=0 c=3 -> especificidade = 3 */ H1 + *[REL=up] /* a=0 b=1 c=1 -> especificidade = 11 */ UL OL LI.red /* a=0 b=1 c=3 -> especificidade = 13 */ LI.red.level /* a=0 b=2 c=1 -> especificidade = 21 */ #x34y /* a=1 b=0 c=0 -> especificidade = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> especificidade = 101 */
Nota: É válido repetir a ocorrência de um mesmo seletor simples com a finalidade de aumentar a especificidade.
Nota: A especificidade para estilos aplicados com uso do atributo style
da HTML é descrita nas CSS 2.1.
[CSS21].
A gramática a seguir define a sintaxe para essa especificação. Ela é global LL(1) e pode ser local LL(2) (notar que agentes de usuário não devem usar essa gramática diretamente, pois ela não está de acordo com as convenções de parseamento). O formato adotado foi otimizado para consumo por humanos e algumas abreviaturas, mostradas vão além do que prescreve as Yacc (ver [YACC]):
Expressões :
selectors_group : selector [ COMMA S* selector ]* ; selector : simple_selector_sequence [ combinator simple_selector_sequence ]* ; combinator /* combinators can be surrounded by whitespace */ : PLUS S* | GREATER S* | TILDE S* | S+ ; simple_selector_sequence : [ type_selector | universal ] [ HASH | class | attrib | pseudo | negation ]* | [ HASH | class | attrib | pseudo | negation ]+ ; type_selector : [ namespace_prefix ]? element_name ; namespace_prefix : [ IDENT | '*' ]? '|' ; element_name : IDENT ; universal : [ namespace_prefix ]? '*' ; class : '.' IDENT ; attrib : '[' S* [ namespace_prefix ]? IDENT S* [ [ PREFIXMATCH | SUFFIXMATCH | SUBSTRINGMATCH | '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ]? ']' ; pseudo /* '::' starts a pseudo-element, ':' a pseudo-class */ /* Exceptions: :first-line, :first-letter, :before and :after. */ /* Note that pseudo-elements are restricted to one per selector and */ /* occur only in the last simple_selector_sequence. */ : ':' ':'? [ IDENT | functional_pseudo ] ; functional_pseudo : FUNCTION S* expression ')' ; expression /* In CSS3, the expressions are identifiers, strings, */ /* or of the form "an+b" */ : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ ; negation : NOT S* negation_arg S* ')' ; negation_arg : type_selector | universal | HASH | class | attrib | pseudo ;
A seguir a tokenização, escrita em Flex (ver notação [FLEX]). A tokenização é insensível ao tamanho de caixa.
As duas ocorrências de "\377" o caractere numérico mais alto que as versões atuais do Flex conseguem manipular (decimal 255). Elas devem ser lidas como "\4177777" (decimal 1114111) que é o mais alto code point possível em Unicode/ISO-10646. [UNICODE]
%option case-insensitive ident [-]?{nmstart}{nmchar}* name {nmchar}+ nmstart [_a-z]|{nonascii}|{escape} nonascii [^\0-\177] unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? escape{unicode}|\\[^\n\r\f0-9a-f] nmchar[_a-z0-9-]|{nonascii}|{escape} num [0-9]+|[0-9]*\.[0-9]+ string{string1}|{string2} string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\" string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\' invalid {invalid1}|{invalid2} invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})* invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})* nl\n|\r\n|\r|\f w [ \t\r\n\f]* D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])? E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])? N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v %% [ \t\r\n\f]+ return S; "~=" return INCLUDES; "|=" return DASHMATCH; "^=" return PREFIXMATCH; "$=" return SUFFIXMATCH; "*=" return SUBSTRINGMATCH; {ident} return IDENT; {string} return STRING; {ident}"(" return FUNCTION; {num}return NUMBER; "#"{name}return HASH; {w}"+" return PLUS; {w}">" return GREATER; {w}"," return COMMA; {w}"~" return TILDE; ":"{N}{O}{T}"(" return NOT; @{ident} return ATKEYWORD; {invalid}return INVALID; {num}% return PERCENTAGE; {num}{ident} return DIMENSION; "<!--" return CDO; "-->"return CDC; \/\*[^*]*\*+([^/*][^*]*\*+)*\//* ignore comments */ .return *yytext;
Toda especificação que use essa especificação como base deverá definir os subconjuntos permitidos e excluídos bem como descrever o signiifcado local de todos os componentes dos subconjuntos permitidos.
Exemplos não normativos :
Selectors profile | |
---|---|
Especiifcação | CSS level 1 |
Aceitáveis | seletor tipo seletor classe seletor ID pseudoclasses :link, :visited and :active sinal de combinação para elementos descendentes pseudoelementos ::first-line e ::first-letter |
Exclusões |
seletor universal namespaces |
Restrições extras | permitido somente um seletor classe por sequência de seletores simples |
Selectors profile | |
---|---|
Especificação | CSS level 2 |
Aceitáveis | seletor tipo seletor universal seletor presença e valos de atributo seletor classe seletor ID pseudoclasses :link, :visited, :active, :hover, :focus, :lang() e :first-child pseudoclasses sinal de combinação para elementos descendentes sinal de combinação para elementos filhos sinal de combinação para elementos irmãos pseudoelementos ::first-line e ::first-letter pseudoelementos ::before e ::after |
Exclusões |
substring matching attribute selectors namespaces |
Restrições extras | permitido mais de um seletor classe por sequência de seletores simples (restrição das CSS1) |
Em CSS, seletores são padrões que estabelecem regras de casamento destinadas a aplicar estilização em elementos da árvore do documento.
O seletor mostrado a seguir (CSS nível 2) casará com todos os elementos âncora
a
que contenham o atributo name
e sejam descendentes de um elemento cabeçalho nível 1 h1
:
h1 a[name]
Todas as declarações CSS de um seletor serão aplicadas aos elementos por ele casado.
Profile para seletores | |
---|---|
Especificação | STTS 3 |
Aceitáveis | seletor tipo namespaces |
Exclusões | pseudoclasses não aceitas pseudoelementos |
Restrições extras | alguns seletores e sinais de combinação não são permitidos como fragmentos descritivos escritos após declarações STTS. |
Selectores podem ser usados em STTS 3 de duas maneiras diferentes:
Esta seção define as condições de conformidade com essa especificação.
Não será classificado como não conforme o agente de usuário que não implemente parte dessa especificação em função de limitações de um determinado dispositivo (por exemplo: um agente de usuário não interativo provavelmente não implementará as pseudoclasses dinâmicas, pois elas não fazem sentido sem interatividade).
Todas as especificações que fazem uso dessa especificação devem definir um Profile relacionando as partes dessa especificação que se aplicam e as que são excluidas, bem como devem descreveras limitações que isso acarreta com relação ao que está prescrito nessa especificação.
Erro nde parseamento causa invelidação, por exemplo: a existência de um token não reconhecido ou não permitido em determinado ponto do parseamento.
Agentes de usuário devem observar a sseguintes regras na manipulação de erros de parseamento:
Especificações que se baseiem nessa especificação para seletores devem definir seus próprios mecanismos de tratamento de erros. (No caso das CSS, as condições de seletores que invalidam a regra.)
Existe uma suite de testes para essa especificação que permite verificar o suporte oferecido pelos agentes de usuário às funcionalidades previstas nessa especificação. A suite de teste não tem a pretensão de ser uma ferramenta completa bem como não contempla todas as possíveis combinações das funcionalidades aqui previstas.
O grupo de trabalho das CSS agradece a todos que enviaram comentários sobre essa especificação ao longo dos anos de seu desenvolvimento.
O grupo de trabalho registra um agradecimento especial à Donna McManus, Justin Baker, Joel Sklar e Molly Ives Brower responsáveis pela revisão editorial final do último rascunho. Gostaríamos de agradecer também à Adam Kuehn, Boris Zbarsky, David Perrell, Elliotte Harold, Matthew Raymond, Ruud Steltenpool, Patrick Garies, Anton Prowse, e ao grupo de trabalho do W3C responsável pela Internacionalização pelos comentários sobre a última chamada e também por suas amáveis palavras.