Lección 3: Selectores
etiqueta
Afecta a todas las etiquetas.
body {
color: orange;
}
p {
color: green;
}
id
Solo sea aplica a una etiqueta. Solo se puede utilizar en una ocasión.
/* Empieza por # + alias */
#saturno {
color: brown;
}
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<!-- Se aplica con el atributo "id". Omite # en su valor. -->
<p id="saturno">Lorem ipsum</p>
<p>Lorem ipsum</p>
clases
Solo sea aplica a una o varias etiquetas. Puede repetirse tantas veces como sea necesario.
.mercurio {
color: gray;
}
.venus {
color: yellow;
}
.marte {
color: red;
}
<p class="mercurio">Lorem ipsum</p>
<p class="venus">Lorem ipsum</p>
<p id="jupiter" class="marte">Lorem ipsum</p>
Puedes aplicar varias clases a una misma etiqueta.
<!-- MAL -->
<p id="pluton" class="venus" class="marte">Lorem ipsum</p>
<!-- BIEN -->
<p id="pluton" class="venus marte">Lorem ipsum</p>
Siempre que puedas, usa clases para todo.
La forma más profesional de nombrar las clases es usando la metodología BEM. Puedes leer un resumen.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Te ayudo?
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios