Se você está com pressa, ou já leu esse artigo e quer apenas a referência, o visite W3C TR Selectors e, a versão em português traduzida pelo Maurício Samy Silva em W3C TR Selectors. Ou então apenas olhe a tabela que está logo abaixo, que contém uma cópia da tabela na definição oficial no W3C.

Neste artigo, gostaria de chamar a sua atenção para o fato de que, se você é um desenvolvedor front-end, que saber estes seletores pode ser útil em situações que tenha que manipular o DOM e, se você é desenvolvedor back-end, que saber um pouco mais sobre tais seletores pode servir como um complemento até mesmo se não pretende ser um desenvolvedor de HTML.

Screencast sobre como testar de forma rápida estes seletores com querySelectorAll()

Como um convite a leitura deste artigo e, também para demonstrar como testar rápido alguns destes seletores usando apenas o seu navegador, segue abaixo um screencast.

Quer saber mais desse mesmo assunto? Recomendo o link Visão geral do uso de console e inspetores de navegadores no desenvolvimento front-end, que contém screencast e texto abordando não só o Google Chrome, mas também o Firefox, Opera e Internet Explorer.

O que são seletores

Em poucas palavras, é a lógica que pode ser usada para selecionar um ou mais elementos de documentos de marcação XML e HTML. Eles selecionam o que é desejado.

Tabela com os seletores nível 3

Pattern Meaning Described in section First defined in CSS level
* any element Universal selector 2
E an element of type E Type selector 1
E[foo] an E element with a "foo" attribute Attribute selectors 2
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" Attribute selectors 2
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" Attribute selectors 3
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2
E:root an E element, root of the document Structural pseudo-classes 3
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3
E:first-child an E element, first child of its parent Structural pseudo-classes 2
E:last-child an E element, last child of its parent Structural pseudo-classes 3
E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3
E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3
E:only-child an E element, only child of its parent Structural pseudo-classes 3
E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3
E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3
E:link
E:visited
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1
E:active
E:hover
E:focus
an E element during certain user actions The user action pseudo-classes 1 and 2
E:target an E element being the target of the referring URI The target pseudo-class 3
E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) The :lang() pseudo-class 2
E:enabled
E:disabled
a user interface element E which is enabled or disabled The UI element states pseudo-classes 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
E::first-line the first formatted line of an E element The ::first-line pseudo-element 1
E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1
E::before generated content before an E element The ::before pseudo-element 2
E::after generated content after an E element The ::after pseudo-element 2
E.warning an E element whose class is "warning" (the document language specifies how class is determined). Class selectors 1
E#myid an E element with ID equal to "myid". ID selectors 1
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
E F an F element descendant of an E element Descendant combinator 1
E > F an F element child of an E element Child combinator 2
E + F an F element immediately preceded by an E element Adjacent sibling combinator 2
E ~ F an F element preceded by an E element General sibling combinator 3

Fonte: Selectors Level 3

Onde estes seletores padrões são usados

Ainda que o principal uso conhecido pela maior parte dos desenvolvedores é o uso de seletores apenas para estilizar a aparência de um documento de marcação, os mesmos seletores são usados em outras áreas. Por isso, a não ser que sua área de trabalho seja realmente divergente do que pode ser englobado aqui, saber, e saber bem sobre estes seletores, além de extremamente poderoso pode servir para outros propósitos.

CSS, as Folhas de Estilo em cascata, em especial para estilizar aparência

Um problema com o início da Web, em que CSS ou nem existia, ou era pouco explorado, era que para estilizar uma página HTML, era necessário fazer isso no próprio HTML. Ou seja, para setar o tamanho de uma fonte, isso deveria ficar no próprio documento. Isso pode parecer coerente quando estamos falando em documentos de texto locais, mas, quando falamos de um site, em que dezenhas, centenas ou mesmo milhares de páginas contém as mesmas definições de aparência, quando alguém teria que alterar, por exemplo, o tamanho da fonte de certos paragrafos, teria que fazer isso em todas as páginas. Era desmotivante. Além disso, mais do que apenas retrabalho, também é uma questão de tamanho: aparência em geral, por ser semelhante em várias páginas, significaria uma perda de tempo se não pudesse ser cacheada.

CSS nasceu da idéia de separar qual estilo deveria ser usado. Isso quer dizer que você consegue manter uma marcação HTML limpa.

Exemplos de uso em CSS podem ser visto na tabela anterior

Javascript, em especial para manipular o DOM

Além de CSS, certamente via javascript é um dos lugares que, para um desenvolvedor front-end, mais tenha destaque o uso de tais seletores. Por isso Javascript merece destaque em relação a outras linguagens que manipulem a DOM

Alguns exemplos de uso em Javascript

Outras linguagens que manipulem com DOM

O fato destes seletores já terem sido largamente discutidos por profissionais que de fato os usavam, de já existir uma documentação extensa e de muitos profissionais já conhecerem esses seletores, torna-os uma ótima opção para qualquer outra linguagem, em vez de criar seus próprios meios de acessar o DOM ao parsear documentos de marcação, ou priorizar o acesso apenas com esses seletores, ou os permitir como opção adicional. Re-inventar a roda é algo que deve ser evitado caso você não tenha certeza absoluta do que quer.

É comum a situação em linguagens, em especial as que podem lidar com a web, de disponibilizarem tanto nativamente como via voluntários da comunidade parseadores de DOM. E isso quer dizer que, a mesma lógica que vê nessa documentação oficial, é aproveitada também neles.

Se você é desenvolvedor backend, usar uma API que goza da lógica destes seletores, mesmo que você não tenha interesse em front-end, pode ser útil saber a sintaxe de seletores como é usada em CSS ou mesmo em Javascript para debugar mais rápido seu código. Tem uma boa chance de usar um navegador com um inspetor de código seja mais rápido do que os métodos que costuma usar em seu console de debug.

Compatibilidade com navegadores ou APIs/Bibliotecas de linguagens

Por diversas razões, alguns seletores, principalmente os mais novos, podem não ter compatibilidade com o fim que você pretende ter. Nesse sentido, vale a pena testar antes. Os seletores nível 3 (CSS3) tendem a serem mais novos e é razoável ter um pré-conceito que se o seletor for desse tipo, deva olhar com mais atenção.

Navegadores compatíveis, para CSS e Javascript

O site Can I Use?, em português eu posso usar? é uma boa referencia tanto para CSS, Javascript como outras APIs consideradas no vulgo pacotão HTML5. Ele não é uma referência oficial, mas ainda assim é decente, e o sistema de busca é bem ágil.

Se você olhar na documentação oficial, pelo menos a fornecida pelo grupo WHATWG também contém anotações, porém não fica claro exatamente quais versões são suportadas ou não, e a busca é menos ágil que o link anterior

Demais linguagens e bibliotecas

Neste caso, você deve pesquisar junto a documentação do desenvolvedor original. Caso não ache isso de forma muito simples, terá que testar e ver o que funciona. Vale lembrar que, mesmo que algo funcione de forma simples, em uma situação mais robusta, você pode encontrar um bug que não há uma resolução sem aguardar por atualizações do desenvolvedor. Por isso vale a pena testar um rascunho de tudo que acha que pode dar errado antes de prometer prazos.

Alternativa ao uso de seletores

Algumas linguagens podem não implementar os seletores como apresentado aqui, porém XPath é uma alternativa. Ainda que seja menos popular entre desenvolevdores front-end, ou via a distribuição padrão da sua linguagem, ou via bibliotecas de terceiros, XPath é um outro metodo poderoso de selecionar elementos de um DOM. Porém esse é assunto para outro artigo futuro.

comments powered by Disqus