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

Los selectores CSS id y class permiten realizar selecciones de elementos más específicos

Ernesto BarrachinaDesarrollo web, Diseño webDeja tu comentario

Contenido actualizado el: 20 agosto 2018

Selectores CSS id y class, y otras selecciones complejas en el personalizado web
5 (100%) 7 votos

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 de páginas 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.

Pero si nos tomamos la definición de selector CSS al pie de la letra, entenderemos que es posible seleccionar varios elementos dentro de una misma regla.

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>

Los selectores múltiples CSS permiten que una regla afecte a más de un elemento HTML
El resultado será algo parecido a esto:

Título H2 de color púrpura

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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;
}

Los selectores id y class identifican esos atributos en el HTML

Aclarado esto, aunque solo sea el concepto, veamos cómo funcionan los selectores “id” y “class”. Los más útiles y a los que más partido les vas a sacar programando con CSS.

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.

Diferencias y uso de los selectores CSS ID y Class

Selector ID

➡ Los selectores id son elementos únicos.

Solo puede existir uno con el mismo “nombre de atributo” en cada página del sitio web.

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.

Los selectores id identifican a un elemento entre sus iguales para aplicarle diferente estilo que a ellos

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>
En la misma página pueden existir la cantidad de atributos y selectores id necesarios, siempre que tengan un nombre diferente.

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.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

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>

El color de este párrafo viene asignado por el selector único global.

En cambio el de este lo asigna su atributo id y un selector id.

Este también obedece a la regla con selector único.

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.

Lo pongas donde lo pongas, id hace una selección concreta para un elemento y le asigna el estilo de esa regla obviando al resto.

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?

Para estos casos, CSS ofrece la posibilidad de agrupar elementos mediante selectores class, con los que asignar un mismo estilo a un grupo de elementos HTML que compartan la misma clase.

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.

Las clases permiten aplicar el mismo estilo a distintos elementos HTML

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.

Verás que sigue dando el mismo resultado porque las reglas con class (clases) priorizan sobre las de los elementos globales.
Un selector ID o Class prioriza ante una regla con selector CSS global Cuéntalo en las redes

Descubre más etiquetas HTML que modificar con CSS

¡Disculpa esta interrupción!

De paso que te doy un respiro, quiero informarte de que tienes un curso de HTML con el que descubrir las etiquetas a las que puedes aplicar estilo CSS desde WordPress.

¡Curso de HTML WordPress gratis!

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! 😉

Es posible combinar selectores para variar el estilo CSS

😀 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.

Si no conoces la etiqueta <span> </span> de HTML enseguida descubrirás para qué se usa.

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í:

Texto al que aplicaremos estilo combinando selectores CSS

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.

No así con la clase que vamos a asignarla a tantos elementos como queramos.

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.

Podríamos haber hecho lo mismo directamente sobre el párrafo, sin usar ningún span, pero en este ejemplo no tendría sentido haber usado una clase.

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

Texto personalizado combinando reglas con diferentes atributos CSS

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar presupuesto web

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.

La técnica consiste en crear una ruta en el selector, desde el elemento principal hasta el elemento que debe ser modificado.

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?

Los selectores complejos permiten seleccionar elementos anidados a distintos niveles

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.

Este método de selección nos evitará inundar el documento con más id y class de las necesarias.

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.

Sino pedirle a CSS que pinte de amarillo los span que estén dentro de cualquier elemento con el atributo de clase rojo ¿no?
.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 😯

¿Cómo selecciono un elemento específico que está dentro de otro en concreto, pero que tiene asignada una clase que comparte con otros?

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;
}
Observa que en selector, para indicar que el párrafo es de clase destacado NO hay separación entre el elemento único y su clase.

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>
Se sobrentiende que todas estas selecciones complejas que hemos estado realizando con las clases también podemos hacerlas con los id.
Con este curso gratuito, CSS resulta más fácil de lo que pensaba Cuéntalo en las redes

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 😀

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Quieres un Diseño Web Valencia?

« Siguiente
Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.