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.

3-1 3-2 3-3

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario