Selectores CSS

Aprenda todas las cosas más importantes sobre los selectores de CSS

Un selector nos permite asociar una o más declaraciones a uno o más elementos de la página.

Selectores básicos

Supongamos que tenemos unpelemento en la página, y queremos mostrar las palabras en él usando el color amarillo.

Podemosobjetivoese elemento usando este selectorp, que apunta a todos los elementos que utilizan elpetiqueta en la página. Una regla CSS simple para lograr lo que queremos es:

p {
  color: yellow;
}

Cada etiqueta HTML tiene un selector correspondiente, por ejemplo:div,span,img.

Si un selector coincide con varios elementos, todos los elementos de la página se verán afectados por el cambio.

Los elementos HTML tienen 2 atributos que se usan con mucha frecuencia dentro de CSS para asociar el estilo a un elemento específico en la página:classyid.

Hay una gran diferencia entre esos dos: dentro de un documento HTML puede repetir lo mismoclassvalor en varios elementos, pero solo puede utilizar uniduna vez. Como corolario, usando clases puedes seleccionar un elemento con 2 o más nombres de clase específicos, algo que no es posible usando ids.

Las clases se identifican mediante el.símbolo, mientras que los identificadores utilizan el#símbolo.

Ejemplo usando una clase:

<p class="dog-name">
  Roger
</p>
.dog-name {
  color: yellow;
}

Ejemplo usando una identificación:

<p id="dog-name">
  Roger
</p>
#dog-name {
  color: yellow;
}

Combinando selectores

Hasta ahora hemos visto cómo apuntar a un elemento, una clase o una identificación. Introduzcamos selectores más potentes.

Apuntar a un elemento con una clase o id

Puede apuntar a un elemento específico que tenga una clase o identificación adjunta.

Ejemplo usando una clase:

<p class="dog-name">
  Roger
</p>
p.dog-name {
  color: yellow;
}

Ejemplo usando una identificación:

<p id="dog-name">
  Roger
</p>
p#dog-name {
  color: yellow;
}

¿Por qué querría hacer eso, si la clase o id ya proporciona una forma de apuntar a ese elemento? Puede que tengas que hacer eso para tener másespecificidad. Veremos qué significa eso más tarde.

Dirigirse a varias clases

Puede apuntar a un elemento con una clase específica usando.class-name, como viste anteriormente. Puede apuntar a un elemento con 2 (o más) clases combinando los nombres de las clases separados con un punto, sin espacios.

Ejemplo:

<p class="dog-name roger">
  Roger
</p>
.dog-name.roger {
  color: yellow;
}

Combinando clases e identificadores

De la misma manera, puede combinar una clase y una identificación.

Ejemplo:

<p class="dog-name" id="roger">
  Roger
</p>
.dog-name#roger {
  color: yellow;
}

Agrupar selectores

Puede combinar selectores para aplicar las mismas declaraciones a varios selectores. Para hacerlo, sepárelos con una coma.

Ejemplo:

<p>
  My dog name is:
</p>
<span class="dog-name">
  Roger
</span>
p, .dog-name {
  color: yellow;
}

Puede agregar espacios en esas declaraciones para que sean más claras:

p,
.dog-name {
  color: yellow;
}

Siga el árbol del documento con selectores

Hemos visto cómo apuntar a un elemento en la página usando un nombre de etiqueta, una clase o una identificación.

Puede crear un selector más específico combinando varios elementos para seguir la estructura del árbol del documento. Por ejemplo, si tiene unspanetiqueta anidada dentro de unp, puede apuntar a esa sin aplicar el estilo a unaspanetiqueta no incluida en unpetiqueta:

<span>
  Hello!
</span>
<p>
  My dog name is:
  <span class="dog-name">
    Roger
  </span>
</p>
p span {
  color: yellow;
}

Vea cómo usamos un espacio entre los dos tokens.pyspan.

Esto funciona incluso si el elemento de la derecha tiene varios niveles de profundidad.

Para hacer que la dependencia sea estricta en el primer nivel, puede usar el>símbolo entre las dos fichas:

p > span {
  color: yellow;
}

En este caso, si unspanno es un primer hijo de lapelemento, no se le aplicará el nuevo color.

A los niños directos se les aplicará el estilo:

<p>
  <span>
    This is yellow
  </span>
  <strong>
    <span>
      This is not yellow
    </span>
  </strong>
</p>

Los selectores de hermanos adyacentes nos permiten diseñar 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 del tramo precedidos por unpelemento:

<p>This is a paragraph</p>
<span>This is a yellow span</span>

Tenemos muchos más selectores que podemos usar:

  • selectores de atributos
  • selectores de pseudo-clase
  • selectores de pseudoelementos

Más sobre los de publicaciones futuras.

Descarga mi gratisManual de CSS


Más tutoriales de CSS:


Tech Wiki en línea!