Selectors — class and id · Selectores — clase 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 necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
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.
Español
Tres tipos de selectores
- Un selector indica qué elementos modifica una regla.
- Por etiqueta:
p { ... }cambia todos los<p>. - Ese es el tipo que utilizaste en la última lección.
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.
Español
Por clase y por id
- Por clase:
.note { ... }cambia todos los elementos conclass="note". Un punto.significa clase. - Por id:
#title { ... }cambia el único elemento conid="title". Un numeral#significa id. - Una clase puede estar en muchos elementos; un id debe estar en uno solo.
<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.
Español
Errores comunes
- Un selector de clase comienza con
., un selector de id con#. - Reutiliza una clase en muchos elementos; un id aparece una sola 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.
Español
Ahora tú practica
- Asocia el punto
.a una clase y el numeral#a un id. - Aplica estilo a una clase, luego aplica estilo a un id.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class). · Estiliza la nota. Añade una regla para la clase note: .note { color: green; } (un punto significa clase).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id). · Estiliza el título. Añade una regla para el id title: #title { color: purple; } (un numeral significa id).