Personalizado web. Los selectores CSS id y class

Personlizar web con los selectores CSS. Id y class

En los tutoriales CSS anteriores hemos aprendido a manejarnos con el código de forma básica. En este tercer artículo vamos a estudiar los selectores CSS profundizando un poco más en el aprendizaje de la personalización de sitios web.

Puedes acceder a los tutoriales anteriores desde los siguientes enlaces:

  1. Guía básica de iniciación a CSS
  2. Dónde y cómo usar CSS

¿Recuerdas lo fácil que era entender las matemáticas con manzanas y peras? Con los selectores id y class intentaremos hacer lo mismo.

En otros artículos hemos practicado con los selectores CSS únicos y con el estilo CSS en línea. Hemos creado reglas CSS y las hemos insertado de diferentes maneras en el archivo HTML. En este caso aprenderemos a hacer selecciones más complejas con las que optimizar nuestros documentos CSS, y centraremos gran parte del post en los selectores id y class.

Te recomiendo ir haciendo los ejercicios sobre los selectores CSS durante la lectura. Si no practicas no aprenderás.

Selectores CSS para múltiples elementos

Recordemos que los selectores CSS indican el elemento o elementos HTML que van a ser afectados por la regla CSS. Por tanto podemos seleccionar varios elementos dentro de la misma regla.

La sintaxis es similar a la que conocemos pero se diferencia en que los elementos del selector están separados por un coma ( , )

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

Como es costumbre en esta serie de 4 tutoriales CSS puedes hacer prácticas mientras los lees. Para realizar los ejercicios necesitas un archivo HTML y otro CSS, que ya tendrás de los artículos anteriores. Si no es así puedes descargar desde este enlace el archivo HTML y desde este otro el archivo CSS.

Recuerda que editaremos el código usando el editor gratuito Notepad++, que también te servirá para crear tus propios archivos si no quieres descargarlos.

Ejercicio: Seleccionar varios elementos con regla CSS

Para crear un selector CSS múltiple y hacer 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.

p, h2{
color: purple;
}

Y en tu archivo 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.

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.

Te recuerdo que los archivos deben estar dentro de la misma carpeta, con el archivo CSS enlazado desde el HEAD del HTML. La url deberá ser el nombre del archivo CSS como en la imagen:

Selectores CSS. Selector múltiples elementos
Prueba a añadir al selector CSS otras propiedades y valores de los que hemos usado hasta ahora, con la finalidad de que afecten tanto al h2 como al párrafo.

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.

Los selectores CSS y los atributos HTML

Quiero hacer un alto en el camino indicando que hay que diferenciar estos dos términos porque los entremezclaremos durante la lectura. Para identificar a un elemento especial o a varios de ellos en el código HTML les asignaremos un atributo que lo identifica, por ejemplo id=”negro”. Para llamarlo desde la regla CSS usaremos un selector, que en este caso será #negro.

Aclarado esto veamos como funcionan los selectores más útiles de CSS, los selectores id y class.

Selectores CSS: selectores id y class

Hasta el momento hemos asignado estilo de forma general, pero durante el proceso de diseño de alguna página web surgirá que solo queramos afectar a un elemento específico o a un grupo de ellos y no al resto. Para seleccionar con este criterio usaremos selectores id y class que además nos ahorrarán escribir código en línea innecesario y mantener nuestros archivos CSS y HTML optimizados.

Tutorial que nos enseña el uso de id y class como selectores CSS

Selectores id

Los selectores id son elementos únicos y solo puede existir uno con el mismo nombre en cada página de un sitio web. Su selector en la regla comienza por # y sirve para identificar un elemento determinado y poder modificarlo. Mediante los selectores id podremos tener todos los párrafos en color negro y uno en concreto de color rojo.

Selectores id para los elementos únicos

¿Cómo usar los selectores id?

Si queremos asignar a un elemento HTML un selector id tenemos que aplicarle este atributo y haber creado su regla:

#rojofuerte{
color: red;
font-weight: bold;
}
#amarillo{
color: yellow;
}
<p id="rojofuerte">Este párrafo es de color rojo y en negrita</p>
<p id="amarillo">En cambio este párrafo es de color amarillo</p>

Podemos tener la cantidad de selectores id necesarios en la misma página siempre que tengan un nombre diferente. Por lo que una vez asignamos un atributo id a un elemento no podremos asignárselo a otro en ese mismo archivo HTML.

Nomenclatura de los selectores id

El nombre de un atributo id no puede contener espacios en blanco, ni letras ñ, ni tildes, ni empezar por números. Podemos usar letras mayúsculas, minúsculas y números (si no son al principio). También podemos utilizar guiones medios ( – ).

Para usar una palabra compuesta en el nombre del id, e identificarlo fácilmente podemos usar una estructura del tipo: parrafoEspecial, parrafoEspecial2, o separar mediante guiones: parrafo-especial, parrafo-especial-2.

Ejercicio: Crea tu primer selector id

Si quieres en este caso puedes utilizar solo el archivo HTML. Crea una regla para un atributo dentro de la etiqueta <style> </style> y escribe varios párrafos dentro del BODY. Asígnale a uno de ellos ese 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>En un lugar de la Mancha, de cuyo nombre no quiero acordarme,</p>
<p id="rojo">no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,</p>
<p>darga antigua, rocín flaco y galgo corredor.</p>
</body>
</html>

Como era de esperar el resultado serán párrafos de color púrpura y el de id=”rojo”, será de color rojo.

En un lugar de la Mancha, de cuyo nombre no quiero acordarme,

no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,

darga antigua, rocín flaco y galgo corredor.

De momento todo coincide con lo que ya sabemos de otros tutoriales, la regla con selector id sobrescribe a la regla con selector párrafo porque está después. Pero…

¿Qué pasa si reordenamos las reglas y colocamos la del id la primera? ¿debería ser sobrescrita por la regla global para los párrafos?

Prueba a hacer el siguiente cambio en el orden de las reglas.

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

El resultado será exactamente el mismo porque el selector id prioriza en las reglas. Lo pongas donde lo pongas hace una selección concreta para un elemento y le asigna el estilo de su regla obviando al resto.

Selectores class

Para facilitarnos la vida y poder agrupar elementos, CSS nos ofrece la posibilidad de usar clases mediante el selector class. Con ellas podemos asignar un estilo a un grupo de elementos HTML. Este grupo puede estar formado por varios elementos iguales o diferentes. Es decir, le podemos asignar por ejemplo el mismo color a un párrafo y aun titular que son de la misma class. Su representación en la regla comienza por un punto ( . ).

¿Cómo usar los selectores class?

Si tenemos varios elementos en una misma página que van a compartir características a todos les asignaremos la misma class. En cuanto a la nomenclatura de un selector class hay que seguir las mismas directrices que en el caso de los id.

Sigue unas normas básicas y crea clases CSS

Ejercicio: Crea tu primer selector class

En el ejemplo vamos a crear una clase naranja que vamos a aplicar a un h2 y a un párrafo. Como en el ejemplo anterior puedes usar solo el archivo HTML, aunque si lo prefieres puedes trabajar también desde el archivo externo enlazado.

Asigna estilo a los párrafos y al título. Luego declara la regla para la clase naranja.

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

Dentro del BODY del HTML añade un h2 y varios párrafos. Asigna la clase naranja al título y a uno de los párrafos.

<h2 class="naranja">Don Quijote de la Mancha</h2>
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme,</p>
<p class="naranja">no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,</p>
<p>darga antigua, rocín flaco y galgo corredor.</p>

Si ya tienes el resultado y tanto el título como el párrafo se ven de color naranja, prueba a cambiar el orden de las reglas como en el ejemplo de los id. Verás que sigue dando el mismo resultado. Las clases hacen una selección de un grupo y sus reglas priorizan sobre el resto.

Selectores CSS combinados: id+class, class+class…

A un mismo elemento HTML podemos aplicarle estilo proveniente de diferente tipo selectores. Podemos mezclar id y clase, clase y clase, id y estilo en línea…

Aprende a combinar id y class con la guía CSS

Como ya sabemos que todo se aprende con la práctica, vamos a ello. Lo primero es crearnos diferentes reglas para combinarlas en los ejercicios. Esta vez para hacerlo más profesional vamos a utilizar el archivo HTML y el CSS externo que habremos enlazado.

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 las reglas hemos aplicado a los párrafos, título y span unas propiedades y valores generales desde distintas reglas. Si no conoces la etiqueta <span> </span> de HTML enseguida descubrirás para qué se usa.

Vamos a seleccionar un texto largo para poder 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 no se le han aplicado propiedades desde una regla con propiedades y valores CSS

Vamos con los ejercicios.

Ejercicio: Selector id + class

En el primer ejemplo vamos a combinar una clase y un id para el titular H2. El texto del título pasará a ser rojo con el fondo en gris y las letras en mayúsculas.

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

Como ya hemos asignado el id a un elemento no podemos hacerlo para 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 irán produciendo.

Ejercicio: Selector class + class

Sin borrar el trabajo realizado en el ejemplo anterior, decide a qué párrafo vas a asignarle dos clases. 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 para añadir dos clases las hemos separado por un espacio en blanco dentro del mismo atributo class. Puedes asignar la cantidad de clase que necesites siempre que respetes esta nomenclatura.

Ejercicio: Selector class + en línea

Como en el caso anterior no modifiques nada de lo que has hecho y usa otro párrafo para el ejemplo.

La siguiente práctica consistirá en añadir una clase a un párrafo y cambiar de color una parte sobrescribiendo la regla 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 le obligan a un cierto comportamiento, la etiqueta HTML <span> crea otro elemento dentro del párrafo al que no le afectará en nada y nos permitirá añadir nuevo estilo a un fragmento de este.

Si todo ha ido bien el resultado de tu personalización durante los ejercicios debe quedar así:

Texto personalizado con atributos y selectores. Selectores 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 un Presupuesto!

Selección de elementos anidados

Como sabemos casi todos los elementos HTML están contenidos unos dentro de otros. Por ejemplo un párrafo puede contener (entre otros elementos) a un span (<span>) o un enlace (<a>) y serán los elementos anidados.

El objetivo de este tipo de selección es poder manipular elementos localizándolos sin necesidad de añadirles una clase específica. La técnica es crear una ruta en el selector, desde el elemento principal hasta el elemento que debe ser modificado.

Selección de un elemento anidado en otro

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

p span{
color: silver;
}

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

En este caso hemos seleccionado a todos los span que están dentro de cualquier párrafo.

¿Pero qué pasa si no quieres seleccionarlos a todos y solo quieres seleccionar una parte 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. Veamos qué más cosas podemos hacer con ellos.

Gracias a este tipo de selección tenemos acceso a elementos que se encuentran dentro de otros solo si tienen el atributo de una cierta clase. Evitamos crear nuevas clases a esos elementos porque podemos seleccionarlos de otra manera.

Por ejemplo tenemos un párrafo de class=”rojo” y dentro un span de class=”amarillo”. En el código HTML sería:

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

pero nos ha costado crear una regla nueva y añadirle el atributo al span. Imagina que tienes decenas de span de esta clase entre el código. La forma óptima de seleccionarlos sería no asignándoles una clase en el código HTML…

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

para luego seleccionarlos con la regla…

.rojo span{
color: yellow;
}

Vamos a entenderlo mejor con el ejemplo siguiente.

Ejercicio: Selección de elementos anidados en otros de una clase específica

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 existir otros span dentro de los párrafos, solo se han visto afectados por la regla los span que están dentro de un elemento de class=”destacado”. Y nos da igual si son párrafos u otro tipo de elemento.

Prueba tu mismo a añadirle la class=”destacado” también al título h2 y ponle dentro un span. También será de color rojo.

Ahora la pregunta es la siguiente: ¿Cómo selecciono un elemento que está dentro de otro específico que tiene asignada una clase, y no en todos los demás de esa misma clase?

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

Podemos afinar aún más la selección de elementos. Con el mismo código usado en el ejemplo anterior, con la class=”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 class=”destacado” y no al del título h2 de class=”destacado”.

El código HTML que debes tener 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>

y la regla necesaria para acceder al elemento de forma aún más selectiva:

p.destacado span{
color: red;
}

Cuando ejecutes tu archivo en el navegador verás que al span de la título h2 ya no se ve afectado, y solo lo hacen los span que están dentro del elemento class=”destacado” si es un párrafo.

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

Ejercicio: Selección de un elemento anidado de tercer nivel

Para finalizar al artículo te voy aponer a prueba y 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>

Todas estas selecciones discriminatorias que hemos hecho con las clases podemos hacerlas con los id.

Evidentemente solo existirá un elemento con el mismo nombre de atributo id en cada página. Pero si estamos usando un archivo externo que afecte a varios documentos HTML la cosa cambia, ya que se puede repetir el nombre de id si está en páginas diferentes. Por ejemplo en la home de la web, en la página de contacto, en la de servicios…

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 otras formas más complejas de seleccionar elementos HTML con y sin atributos. Ya has pasado lo más complicado del manual. Si has hecho los ejercicios de los tutoriales hasta ahora, ya tienes herramientas suficientes como para plantearte empezar con 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 van a ser muy útiles para la personalización de tu web. Veremos por ejemplo el atributo hover, que permite cambiar temporalmente los estilos de los elementso al poner el cursor encima. Te permitirá crear por ejemplo botones animados.

Ver el 4º tutorial de la guía CSSIr al 2º tutorial de CSS

Si no te ha quedado clara alguna parte de esta manual puedes recurrir al formulario de comentarios un poco más abajo.

Si te ha gustado comparte

Información del autor

Ernesto Barrachina

¿Quieres ver mi biografía?

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.

Siguiente
Anterior

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*