Seletor de Elementos no HTML
Objetivo
O objetivo desta atividade consiste em abordar os seguintes temas:
- Criar um selector para coletar elementos do HTML
- Usar a extensão CSS Selector para visualizar a seleção
Descrição
Segundo a norma Selectors Level 3 do W3C, a tabela de seletores exibe uma vasta gama de opções para obteção dos elementos de um HTML. A princípio esse recurso é bastante utilizado no CSS para aplicação de estilos nos Rulesets, contudo, outras linguagens e ferramentas também vem se beneficiando de seu potencial, como, por exemplo, o Javascript que pode resgatar elementos do HTML via seletores do CSS para sua devida manipulação ou tratamento de eventos.
Antes de iniciar a atividade é importante habilitar a extensão CSS Selector (Github) para visualizar o resultado de um seletor CSS. Então, instale a extensão ou faça o download do arquivo css-selector.zip e tente habilitar a extensão seguindo as instruções no Chrome.
No intuito de testar os vários seletores, acesse a página do CSS no Wikipedia e tente fazer a seleção dos seguintes elementos:
- Os títulos de nível 1
- Todos os títulos
- Todos os hyperlinks do artigo principal
- Selecione as anotações (
<div role="note">) - Selecione o primeiro hyperlink do menu, o de texto “Main page”
- O primeiro parágrafo do artigo principal
- A table “CSS priority scheme (highest to lowest)”
- As linhas pares do corpo da table “CSS priority scheme (highest to lowest)”
- Algum link quando o curso está em cima dele.
Uma dica legal é que as Ferramentas de Desenvolvedor geralmente conseguem traçar uma selector para as tags selecionadas, no chrome, na aba Elements você pode acessar o seletor de uma tag via seu menu suspensdo, na opção Copy > Copy selector. Outro recurso legal é que vc pode ter a aplicação de novos Rulesets em Elements, então, tente aplicar a cor de plano de fundo #ccc nas linhas pares do corpo da table “CSS priority scheme (highest to lowest)“.
Alternativa de resposta
Seletores
- Os títulos de nível 1:
h1 - Todos os títulos:
h1, h2, h3, h4, h5, h6 - Todos os hyperlinks do artigo principal:
#bodyContent a - Selecione as anotações (
<div role="note">):div[role="note"] - Selecione as anotações (
<div role="note">) que estão após um título de nível 2:h2+div[role="note"] - Selecione o primeiro hyperlink do menu, o de texto “Main page”:
#p-navigation li:first-child a - O primeiro parágrafo do artigo principal:
#bodyContent p:first-of-type - A table “CSS priority scheme (highest to lowest)“:
#mw-content-text > div > table:nth-child(52) - As linhas pares do corpo da table “CSS priority scheme (highest to lowest)“:
#mw-content-text > div > table:nth-child(52) tbody tr:nth-child(2n)
Ruleset
#mw-content-text > div > table:nth-child(52) tbody tr:nth-child(2n) {
background-color: #ccc;
}