Selectores CSS id y class, y otras selecciones complejas en el personalizado web

Contenido actualizado a fecha: 9 febrero 2021

Con los tutoriales CSS anteriores hemos aprendido a manejarnos con el código CSS de forma básica. Así que en este tercer capítulo te propongo descubrir los selectores CSS y que profundicemos un poco más en el diseño web.

➡ Puedes acceder a los primeros tutoriales:

Sé que pensarás que no tiene demasiado que ver, pero… ¿recuerdas lo fácil que era entender las matemáticas del colegio con peras y manzanas?

Pues con los selectores ID y CLASS voy a intentar hacer lo mismo 😉

Resumiendo los anteriores capítulos, hemos practicado con selectores CSS únicos y con estilos CSS en línea. También creado reglas CSS, y las hemos insertado de distintas fomas en el archivo HTML.

En esta ocasión aprenderemos a realizar selecciones más complejas con las que optimizar nuestros documentos CSS, aunque centraremos gran parte del post en los selectores id y class.

Como siempre, te recomiendo ir haciendo los ejercicios sobre selectores CSS durante la lectura.

Si no practicas no aprendes 😛

Selectores CSS para múltiples elementos

Los selectores CSS indican el elemento o elementos HTML que se verán afectados por una regla CSS.

Hasta ahora nuestros selectores eran párrafos (p) o títulos (h2). O sea, elementos únicos.

La sintaxis para hacer la llamada es similar a la que conocemos pero con los elementos a identificar en el selector separados por un coma ( , )

p, h2{
color: green;
margin-top: 15px;
}

Como de costumbre, para seguir los ejercicios necesitarás un archivo HTML y otro CSS (que tendrás de artículos anteriores) dentro de una misma carpeta. Y como editor de código usaremos Notepad++.

Seleccionar varios elementos con una regla CSS

Para crear un selector CSS múltiple, y conseguir que una regla afecte a más de un elemento, escribe el código que se muestra a continuación en tu documento CSS enlazado desde el HEAD del HTML.

p, h2{
color: purple;
}

Y en el HTML este otro:

<h2>Título H2 de color púrpura</h2>
<p>Añade un texto largo</p>

El resultado será algo parecido a esto:

Añade otros elementos (por ejemplo un h1 y un h4) y más propiedades y valores a la regla del selector múltiple para que también se vean afectados.

Diferencias entre selectores CSS y atributos HTML

Quiero hacer un alto en el camino indicando que hay que diferenciar entre las términos selector y atributo porque los mezclaremos durante la lectura.

Desde el código HTML asignaremos un atributo para identificar elementos, por ejemplo id=»naranja».

<p id="naranja">Este párrafo tiene un atributo ID que lo identifica</p>

En cambio, desde la regla CSS usaremos selectores de atributos, que identificarán los elementos a los que se les aplicará estilo, que en este caso será #naranja.

#naranja{
color:orange;
font-weight:bold;
Font-size:20px;
}

Selectores CSS: selectores ID y CLASS

Hasta el momento, desde las reglas hemos asignado estilo de forma general, afectando a todos los párrafos o a todos los títulos.

Pero esto es solo una de las cosas que haremos durante la elaboración de páginas web, ya que surgirán ocasiones en que necesitaremos afectar solo a un elemento HTML específico o a un grupo de ellos y no al resto.

Para seleccionar con este criterio recurriremos a los selectores id y class, que además nos ahorrarán escribir código innecesario y mantener nuestros archivos CSS y HTML optimizados.

Selector ID

➡ Los selectores id son elementos únicos.

Su selector en la regla comienza por #, e identifica a un elemento determinado para poder modificarlo.

Mediante los selectores id seremos capaces de aplicar un estilo exclusivo a un elemento en concreto, independientemente del que se le haya aplicado de forma general.

Por ejemplo, aunque todos los párrafos sean verdes podemos colorear uno en concreto de rojo.

Nomenclatura de los selectores id

El nombre de un atributo id NO puede contener espacios en blanco, ni letras Ñ, ni tildes, y sobre todo NO empezar por números.

➡ Usa letras mayúsculas, minúsculas y números (si no son al principio) y guiones medios ( – ).

En los casos de que para nombrar un atributo o un selector id necesites palabras compuestas, usa la notación de camello (CamelCase). Una estructura tipo: parrafoEspecial, parrafoEspecial2, o separa mediante guiones medios: parrafo-especial, parrafo-especial-2.

¿Cómo usar los selectores id?

Cuando queramos asignar un selector id a un elemento HTML, lógicamente habrá que crear una regla expresa para el nombre de atributo que añadiremos a ese elemento.

#rojoFuerte{
color: red;
font-weight: bold;
}
#amarillo{
color: yellow;
}

<p id="rojoFuerte">Este párrafo con atributo id es de color rojo y en negrita</p>
<p id="amarillo">En cambio este párrafo con diferente atributo id es de color amarillo</p>

Por lo que una vez asignamos un nombre de atributo y selector id a un elemento HTML no podremos asignárselo a otro en ese mismo documento.

No obstante cada una de las páginas de la web: home, contacto, proyectos, etc, pueden tener un id que se repita en todas.

Crear un selector id

Te propongo un ejercicio práctico solo usando el archivo HTML:

Pintaremos todos los párrafos de un mismo color con excepción de uno.

• Crea una regla dentro de la etiqueta style con el selector para un atributo determinado.
• Escribe diferentes párrafos.
• Asígnale a uno de ellos ese atributo id.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
   <title>Título de tu página</title>
    <style type="text/css">
    p{
    color: purple;
    }
    #rojo{
    color: red;
    }
   </style>
  </head>
  <body>
   <p>El color de este párrafo viene asignado por el selector único global.</p>
   <p id="rojo">En cambio el de este lo asigna su atributo id y un selector id.</p>
   <p>Este también obedece a la regla con selector único.</p>
  </body>
</html>

Como era de esperar el resultado serán párrafos de color púrpura con excepción del que tiene el atributo id especial.

Sabemos de tutoriales anteriores que el CSS se lee en cascada, así que es normal que la regla con selector id sobrescriba a la del selector global porque está escrita después.

❓ Pero te hago una pregunta:

Si reordenamos las reglas y colocamos la del selector id la primera ¿se sobrescribirá con la regla global aplicada a los párrafos?

Así que prueba tú mismo/a a hacer el siguiente cambio en el orden de las reglas a ver qué pasa.

<style type="text/css">
  #rojo{
  color: red;
  }
  p{
  color: purple;
  }
</style>

El resultado será exactamente el mismo porque el selector id prioriza ante las reglas globales.

Selector Class

Ahora imagina que quieres aplicar el mismo estilo a varios elementos entre los de un grupo en el que todos son iguales.

➡ Ya NO nos sirve recurrir al atributo id, porque solo puede haber uno ¿correcto?

Y lo mejor es que da igual que sean iguales o diferentes.

Es decir, le podemos asignar el mismo estilo a un P y a un H4 siempre que sean de la misma clase.

¿Cómo usar los selectores class?

Su representación en la regla comienza con un punto ( . ) y debemos seguir las mismas normas de nomenclatura que con los id.

Su uso es sencillo. En este caso todos los elementos que formen el grupo que comparte el mismo estilo tendrán el mismo nombre de atributo class.

En cambio solo necesitaremos una regla para todos esos elementos, ya que comparten la misma clase y por tanto los mismos estilos CSS.

Crear un selector class

Toca realizar un ejercicio en el que vamos a crear una clase naranja, con la que se verán afectados un párrafo y un h2 que en principio están pintados de otro color.

• Crea una regla global para el color de los párrafos y el h2.
• Declara la regla para la clase naranja.
• Luego asigna el atributo class naranja tanto a uno de los párrafos como al h2, para que sobrescriba al estilo global.

p, h2{
color: purple;
}
.naranja{
color: orange;
}

<h2 class="naranja">Título con atributo class</h2>
<p>Párrafo afectado por la regla CSS global.</p>
<p class="naranja">Párrafo con atributo class.</p>
<p>Otro párrafo que se ve afectado por la regla global.</p>

Ejecuta en el navegador para comprobar que solo el título y el párrafo de clase naranja se ven de este color, mientras que el resto son de color púrpura..

Ahora prueba a cambiar el orden de las reglas como hiciste en el ejemplo de los id.

Combinación de selectores CSS: selectores complejos

Ya conocemos selectores para elementos únicos y para los atributos id y class. Pero lo que aún no te he dicho es que los selectores se pueden combinar entre sí.

Dicho de otra forma, a un mismo elemento podemos aplicarle estilo proveniente de diferentes tipos de selectores. Con lo que se pueden combinar id y class, class y class, id y estilo en línea, id y selector único…

¡Lo que se te ocurra! 😉

😀 Como ya sabemos que todo se aprende con la práctica, vamos a ello.

Esta vez, para hacerlo más profesional, usaremos el archivo HTML y el CSS externo enlazado.

Lo primero es crear diferentes reglas para combinarlas durante los ejercicios.

h2{
font-size: 30px;
color: white;
padding: 10px;
background: black;
display: inline;
}
p, span{
color: black;
font-size: 18px;
}
#rojo{
color: red;
background: silver;
}
.naranja{
color: orange;
}
.cursiva{
font-style: oblique;
}
.destacado{
text-transform: uppercase;
font-size: 20px;
}

Desde estas reglas hemos aplicado unas propiedades y valores generales a los párrafos, título y span.

Redacta un texto inventado lo suficientemente largo como para aplicar estas reglas tan variadas.

Partimos de que todo el texto es negro.

<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt...</p>

Primero comprueba el resultado ejecutando el archivo HTML en el navegador, que será algo así:

➡ Vamos con los ejercicios.

Selector id + selector class

En el primer ejemplo vamos a combinar un selector de clase y uno de id para el titular H2.

La historia del asunto es que los estilos para el h2 serán:

• Estilo general para todos los h2 de la web.
• El proveniente de la regla con selector id.
• El de la regla con selector class

<h2 id="rojo" class="destacado">Lorem ipsum</h2>

El texto del título pasará a ser rojo con el fondo en gris y las letras en mayúsculas.

Ahora, como ya hemos asignado el id a un elemento no podemos asignárselo a otro.

Ejecuta el archivo en el navegador para ir viendo los cambios que se van produciendo.

Selector class + selector class

No borres el ejemplo anterior, porque ahora vamos a asignarle dos clases a un mismo párrafo.

El párrafo pasará a estar en cursiva y será de color naranja.

<p class="cursiva naranja">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>

Fíjate que las clases combinadas se separan con un espacio en blanco dentro del mismo atributo class.

Puedes asignar la cantidad de clases que necesites siempre que respetes esta nomenclatura.

Selector class + CSS en línea

➡ Seguimos sin borrar nada.

La siguiente práctica consiste en asignar una clase a un párrafo y además cambiar de color una parte de él sobrescribiendo la regla con estilo en línea.

<p class="cursiva naranja">Nulla consequat massa quis enim. <span style="color:green;">Donec pede justo</span>, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

A pesar de que las clases aplicadas al párrafo lo obligan a tener un estilo, la etiqueta span crea un nuevo elemento dentro de este, permitiendo añadir un estilo distinto solo a un fragmento del texto.

Si todo ha ido bien, el resultado de tus ejercicios quedará así:

Selección de elementos anidados

La manipulación de CSS mediante selectores no termina aquí. Da mucho más de sí 😉

Como sabemos casi todos los elementos HTML pueden contenerse unos dentro de otros. Por ejemplo, un párrafo puede contener un span o un link, que serán los elementos anidados.

El objetivo de este tipo de selección es manipular elementos localizándolos sin necesidad de añadirles una class o id específicos.

Seleccionar un elemento dentro de otro

Para los casos en que necesitemos seleccionar un elemento contenido en otro la sintaxis será:

p span{
color: blue;
}

Observa el espacio en blanco que separa un elemento de otro.

En el HTML tendremos el siguiente código:

<p>Este párrafo tiene anidado <span>un elemento span</span> en su interior</p>

Este párrafo tiene anidado un elemento span en su interior

Con esto seleccionamos todos los span que hubieran dentro de cualquier párrafo.

➡ ¿Pero qué pasa si no pretendes seleccionarlos todos y solo quieres seleccionar alguno de ellos?

Selección de un elemento anidado en otro de una clase determinada

Si pensabas que habíamos agotado las posibilidades de los selectores id y class, estabas equivocado 😉

Gracias a esta técnica se pueden seleccionar elementos que se encuentren dentro de otros, con la condición de que tengan una cierta clase.

Por ejemplo, tenemos un párrafo de clase rojo con un span de clase amarillo.

<p class="rojo">Este párrafo es de clase rojo y tiene un <span class="amarillo">span de clase amarillo</span></p>

➡ Hasta ahora hubiéramos seleccionado al span por su clase:

.amarillo{
color: yellow;
}

Eso sí, nos ha costado un buen trabajo el crear la regla y añadirle su atributo al span.

<p class="rojo">Este párrafo es de clase rojo y tiene un <span>span sin ninguna clase</span></p>

Ahora imagina que tienes decenas de span de esta clase entre el código. Evidentemente, la forma más óptima de seleccionarlos NO sería asignándoles un atributo ni una clase.

.rojo span{
color: yellow;
}

Vamos a entenderlo mejor con el ejemplo siguiente 😉

Selección de elementos según la clase de su contenedor

Crea en tu HTML estos párrafos:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
   <title>Título de tu página</title>
    <style type="text/css">
	.destacado span{
	color:red;
	}
	</style>
  </head>
  <body>
    <h2>El ingenioso hidalgo Don Quijote de la Mancha</h2>
    <p>En un lugar de la Mancha, de <span>cuyo nombre no quiero acordarme</span>, no ha mucho tiempo que <span>vivía un hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. </p>
    <p class="destacado">Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los <span>sábados</span>, lentejas los <span>viernes</span>, algún palomino de añadidura los <span>domingos</span>, consumían las tres partes de su hacienda.</p>
    <p>El resto della concluían sayo de velarte, <span>calzas de velludo</span> para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
  </body>
</html>

Ahora ejecútalo en el navegador.

Si te fijas, a pesar de que hay otros span dentro de los párrafos, solo se han visto afectados por la regla los que están dentro del elemento con atributo «clase destacado».

Por tanto, si le añades el atributo de «clase destacado» a una parte del h2 mediante un span, también será de color rojo.

Ahora ricemos el rizo con un trabalenguas 😯

Selección de un elemento anidado en otro específico y de una clase determinada

Cómo no, es posible afinar aún más la selección de elementos.

Con el mismo código usado en el ejemplo anterior, con la «clase destacado» en el título h2 y en uno de los párrafos, vamos a seleccionar solo los span que estén dentro de un párrafo con el atributo «clase destacado» pero no al del título h2 de «clase destacado».

El código en tu documento:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
   <title>Título de tu página</title>
    <style type="text/css">
	.destacado span{
	color:red;
	}
	</style>
  </head>
  <body>
    <h2 class="destacado">El ingenioso hidalgo <span>Don Quijote de la Mancha</span></h2>
    <p>En un lugar de la Mancha, de <span>cuyo nombre no quiero acordarme</span>, no ha mucho tiempo que <span>vivía un hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. </p>
    <p class="destacado">Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los <span>sábados</span>, lentejas los <span>viernes</span>, algún palomino de añadidura los <span>domingos</span>, consumían las tres partes de su hacienda.</p>
    <p>El resto della concluían sayo de velarte, <span>calzas de velludo</span> para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
  </body>
</html>

La regla con la que acceder al elemento de forma más selectiva, que le pedirá a CSS que pinte de rojo solo aquellos span que estén dentro de un párrafo de class destacado.

p.destacado span{
color: red;
}

Practica con este ejemplo afectando con la regla solo al span que está dentro del título h2.

Selección de elementos anidados en un tercer nivel

Para finalizar al artículo te voy aponer a prueba 😀

No te daré la solución a menos que la pidas, aunque no creo que a estas alturas haga falta.

Debes localizar el span que está en el primer párrafo y colorearlo de rojo. Te dejo el código HTML y una regla aplicada para que añadas otra que la sobrescriba.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
   <title>Título de tu página</title>
    <style type="text/css">
	div p {
	color:black;
	}
	CREA TU REGLA AQUÍ{
	color:red;
	}
	</style>
  </head>
  <body>
	<div id="principal">
	   <h2>Ejercicio final del capítulo</h2>
	   <p class="conSpan">En este ejercício debes localizar <span>este span</span> dentro de un párrafo</p>
	   <p>Pero no a <span>este otro span</span> dentro de este párrafo</p>
	</div>
  </body>
</html>

Sigue aprendiendo sobre selectores CSS y mucho más

En este capítulo hemos estudiado cómo se usan los selectores CSS, sobre todo los selectores id y class, y a realizar selecciones complejas de elementos con y sin atributos.

➡ Por suerte ya has pasado lo más complicado del manual.

Así que si has hecho los ejercicios propuestos hasta ahora, tendrás suficientes herramientas para plantearte la personalización de una página web.

En la última parte de la serie sobre CSS aprenderemos algunas cosillas que se han quedado en el tintero y que van a ser muy útiles durante la personalización de tu web. Como por ejemplo el atributo hover, que te permitirá crear botones animados.

Finalizar el curso de CSS gratisIr a la 2ª parte del manual CSS

Si no te ha quedado clara alguna parte de esta manual puedes recurrir al formulario de comentarios un poco más abajo. Y cómo no, si lo ves de utilidad compártelo en las redes 😀