Selectors — class and id · Selectores — class e id
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
Three kinds of selector
- A selector says which elements a rule changes.
- By tag:
p { ... }changes every<p>. - That is the kind you used last lesson.
Português
Três tipos de seletor
- Um seletor diz quais elementos uma regra muda.
- Por tag:
p { ... }muda todos os<p>. - Esse é o tipo que você usou na última aula.
English
By class and by id
- By class:
.note { ... }changes every element withclass="note". A dot.means class. - By id:
#title { ... }changes the one element withid="title". A hash#means id. - A class can be on many elements; an id should be on one.
Português
Por classe e por id
- Por classe:
.note { ... }muda todo elemento comclass="note". Um ponto.significa classe. - Por id:
#title { ... }muda o único elemento comid="title". Um hash#significa id. - Uma classe pode estar em muitos elementos; um id deve estar em um.
<style>
.note { color: green; }
#title { color: purple; }
</style>
<h1 id="title">My page</h1>
<p class="note">This is a note.</p>
<p>This is normal.</p>
English
Common mistakes
- A class selector starts with
., an id selector with#. - Reuse a class on many elements; an id appears once per page.
Português
Erros comuns
- Um seletor de classe começa com
., um seletor de id com#. - Reutilize uma classe em muitos elementos; um id aparece uma vez por página.
English
Now you try
- Match the dot
.to a class, and the hash#to an id. - Style a class, then style an id.
Português
Agora você tenta
- Combine o ponto
.com uma classe, e o hash#com um id. - Dê estilo a uma classe, depois dê estilo a um id.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class). · Estilize a anotação. Adicione uma regra para a classe note: .note { color: green; } (um ponto significa classe).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id). · Estilize o título. Adicione uma regra para o id title: #title { color: purple; } (uma hashtag significa id).