p {
color: red;
}
Cómo apuntar a múltiples etiquetas:
p, a {
color: red;
}
Ahora veamos algunos selectores adicionales.
Ya sabes que podemos usar los atributos de clase e id en un elemento HTML.
Podemos seleccionar elementos con una clase usando esta sintaxis: .clase {}
Ejemplo:
<p class="nombre-perro">Roger</p>
Ahora veamos algunos selectores adicionales.
Ya sabes que podemos usar los atributos de clase e id en un elemento HTML.
Podemos seleccionar elementos con una clase usando esta sintaxis: .clase {}
Ejemplo:
<p class="nombre-perro">Roger</p>
.nombre-perro { color: yellow; }
Para seleccionar elementos con un id específico, podemos usar esta sintaxis: #id {}
<p id="nombre-perro">Roger</p>
#nombre-perro { color: yellow; }
Hay una gran diferencia entre esos dos selectores.
Dentro de un documento HTML, puedes repetir el mismo valor de clase en varios elementos, pero solo puedes usar un id una vez.
Usando clases puedes seleccionar un elemento con 2 o más nombres de clase específicos, algo que no es posible usando ids.
Puedes apuntar a un elemento que tenga 2 (o más) clases juntas combinando los nombres de clase separados por un punto, sin espacios.
CSS: Más selectores Hemos visto lo básico de los selectores.
Cómo apuntar a una etiqueta:
p { color: red; }
Cómo apuntar a múltiples etiquetas:
p, a { color: red; }
Ahora veamos algunos selectores adicionales.
Ya sabes que podemos usar los atributos de clase e id en un elemento HTML.
Podemos seleccionar elementos con una clase usando esta sintaxis: .clase {}
Ejemplo:
<p class="nombre-perro">Roger</p>
p.nombre-perro { color: yellow; }
Para seleccionar elementos con un id específico, podemos usar esta sintaxis: #id {}
Ejemplo:
code<p id="nombre-perro">Roger</p>
#nombre-perro { color: yellow; }
Hay una gran diferencia entre esos dos selectores.
Dentro de un documento HTML, puedes repetir el mismo valor de clase en varios elementos, pero solo puedes usar un id una vez.
Usando clases puedes seleccionar un elemento con 2 o más nombres de clase específicos, algo que no es posible usando ids.
Puedes apuntar a un elemento que tenga 2 (o más) clases juntas combinando los nombres de clase separados por un punto, sin espacios.
Ejemplo:
<p class="nombre-perro roger">Roger</p>
.nombre-perro.roger { color: yellow; }
De la misma manera, puedes combinar una clase y un id.
Ejemplo:
<p class="nombre-perro" id="roger">Roger</p>
.nombre-perro#roger { color: yellow; }
Puedes crear un selector más específico combinando múltiples elementos para seguir la estructura del árbol del documento. Por ejemplo, si tienes una etiqueta span anidada dentro de una etiqueta p, puedes apuntar a esa sin aplicar el estilo a una etiqueta span que no esté incluida en una etiqueta p:
<span>¡Hola!</span> <p> El nombre de mi perro es: <span class="nombre-perro">Roger</span> </p>
p span { color: yellow; }
Observa cómo usamos un espacio entre los dos tokens p y span.
Esto funciona incluso si el elemento a la derecha está varios niveles más profundo.
Para hacer que la dependencia sea estricta al primer nivel, puedes usar el símbolo > entre los dos tokens:
p > span { color: yellow; }
En este caso, si un span no es un hijo directo del elemento p, no se le aplicará el nuevo color.
Los hijos directos tendrán el estilo aplicado:
<p> <span>Esto es amarillo</span> <strong> <span>Esto no es amarillo</span> </strong> </p>
Los selectores de hermanos adyacentes nos permiten dar estilo a un elemento solo si está precedido por un elemento específico. Lo hacemos usando el operador +:
Ejemplo:
p + span { color: yellow; }
Esto asignará el color amarillo a todos los elementos span precedidos por un elemento p:
<p>Este es un párrafo</p> <span>Este es un span amarillo</span>
Detengámonos un momento con los selectores ahora.
Tenemos más, pero no quiero abrumarte.
Hablaremos sobre algunos más después.