Selectores de CSS a fondo - Curso de CSS3 básico - Capítulo 3


Este va a ser un capítulo más extenso de lo normal, con un tema fundamental para entender el funcionamiento básico de CSS.

¿Qué son y para qué sirven los selectores en CSS?

Los selectores en CSS sirven para seleccionar o indicar que elemento quieres modificar. Es una llamada a ese elemento.

Hay diferentes tipos de selectores, veamos cuales son.

Tipos de selectores en CSS

El selector de etiqueta html

Este primer tipo de selector se escribe con el nombre de la etiqueta html que quieres modificar. Afecta a todas las etiquetas del mismo tipo de todo el documento. En el ejemplo que puedes ver, el selector p afecta a todos los párrafos del documento html al que asociemos este estilo.

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<p>Párrafo 1.</p>
	<p>Párrafo 2.</p>
	<p>Párrafo 3.</p>
</body>
</html>

CSS 

p {
	font-family: Arial;
	font-size: 15px;
}

Resultado en el navegador

El resultado es que todos los párrafos obtienen automáticamente todos los estilos especificados en CSS para el selector p.

Párrafos html

Los selectores de clase CSS

Los selectores de clase se escriben con un punto delante del nombre. El nombre será lo más descriptivo posible y se le aplicará a los elementos html que queramos con el atributo class.

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<p class="p_azul">Párrafo 1.</p>
	<p>Párrafo 2.</p>
	<p class="p_azul">Párrafo 3.</p>
</body>
</html>

CSS 

.p_azul {
	font-style: italic;
	font-size: 20px;
	color: blue;
}

Resultado en el navegador

El resultado es que solo los párrafos a los que vinculo con el atributo class y llamando al selector de clase p_azul son afectados por los estilos.
El nombre p_azul es libre, puedes llamarlo azul, parrafo_azul, letra_azul o cualquier cosa que te haga identificar fácilmente el estilo que es.
Como puedes ver, el párrafo 2, no tiene ningún estilo de clase asignado, por lo que no le afecta y se queda en estilo por defecto de html.

Párrafos html con estilos css
Importante, los nombres de selector de clase no deben comenzar con un número, por ejemplo, 1_azul, 1azul, etc. En cambio, azul_1, a1zul, azul1 si que son correctos, aunque no muy descriptivos. Intenta evitar esto en la medida de lo posible.

Los atributos de estos estilos, son compatibles con cualquier etiqueta de tipo texto, no solo funcionan con <p>, lo puedes aplicar también por ejemplo a cabeceras <h1>,<h2>, etc.

Piensa que si entran en conflicto algunos estilos, prevalecen los selectores de clase sobre los selectores de etiquetas. En el vídeo lo explico detalladamente.

También puedes utilizar esta sintaxis, poner el selector de etiqueta, por ejemplo una p seguido de un punto y el nombre de selector de clase. En este caso, solo se aplicará el estilo a todos los párrafos que tengan el selector de clase y que sean párrafos, aunque se lo apliques a cualquier otra etiqueta, si no es un párrafo y lleva el atributo con dicha clase, no le va a afectar.

Página HTML 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Selectores de CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<h1 class="p_azul">Cabecera h1.</h1>
	<p class="p_azul">Párrafo 1.</p>
    <p>Párrafo 2.</p>
	<p class="p_azul">Párrafo 3.</p>
</body>
</html>

CSS 

p.p_azul {
	font-style: italic;
	font-size: 20px;
 	color: blue;
 }

Resultado en el navegador

El resultado es que aunque el <h1> es compatible con los estilos p_azul y se le ha asignado el estilo con el atributo class, no se ve afectado porqué he indicado explícitamente, que el siguiente estilo solo afecte a párrafos con la clase indicada p_azul.

Estilos css con selector de clase

Cómo añadir varios estilos sobre un atributo class

En un atributo class de cualquier etiqueta html puedes añadir todos los estilos que quieras separándolos con un espacio.

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<h1>Cabecera h1.</h1>
	<p class="p_azul centrar_texto">Párrafo 1.</p>
	<p>Párrafo 2.</p>
	<p class="p_azul">Párrafo 3.</p>
</body>
</html>

CSS 

.p_azul {
	font-style: italic;
	font-size: 20px;
	color: blue;
}

.centrar_texto {
	text-align: center;
}

Resultado en el navegador

El resultado es que el primer párrafo obtiene dos estilos, el de p_azul y el de centrar_texto y el tercero solo uno.

Varios estilos css con selector de clase

Prioridad entre estilos CSS en conflicto

Puede darse el caso en el que indiquemos varios estilos a un mismo elemento mediante el atributo class y que estos estén en conflicto, que sean propiedades iguales con valores distintos, por ejemplo, a un párrafo al cual le añadimos un color de letra azul y en otro estilo le indicamos que la letra es roja.

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<h1>Cabecera h1.</h1>
	<p class="p_azul p_rojo">Párrafo 1.</p>
	<p>Párrafo 2.</p>
	<p class="p_azul">Párrafo 3.</p>
</body>
</html>

CSS 

.p_azul {
    font-style: italic;
    font-size: 20px;
    color: blue;
}

.p_rojo {
    color: red;
}

Resultado en el navegador

El resultado es que el párrafo 1 se queda de color rojo. Esto ocurre porque hemos asignado a este párrafo dos veces el atributo color con dos valores diferentes. En este momento, el navegador tiene que escoger entre uno u otro, de modo, que escoge el último valor especificado leyendo los estilos de arriba a abajo. Primero se encuentra con el valor azul y finalmente con el rojo, que es el que determina que debe quedar. Ten en cuenta que el orden de los selectores que especifiques en los atributos class de las páginas html da igual, el orden que importa es el que está en la hoja css.

sobrescribir estilos css

Los selectores de ID de CSS

Podemos utilizar los id (identificadores) para asignar estilos css. En html, en cualquier etiqueta añade el nombre del estilo css con el atributo id. En css, deberás empezar el nombre del estilo con una almohadilla como se ve en el siguiente ejemplo:

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<h1 id="titulo">Cabecera h1.</h1>
	<p>Párrafo 1.</p>
	<p>Párrafo 2.</p>
	<p>Párrafo 3.</p>
</body>
</html>

CSS 

#titulo {
	text-align: center;
	font-size: 50px;
	color: #68ac95;
	font-family: arial;
}

Resultado en el navegador

El resultado es que el queda una cabecera con el texto centrado, con fuente de 50px, con un color especificado en hexadecimal (expliqué esto en el curso de html avanzado en Youtube, haz click aquí para verlo) y en fuente arial.

estilos css por id

¿Qué diferencia hay entre asignar estilos con class y con id?

La diferencia es clara, class repetidas puede haber las que quieras, id tiene que ser único por documento html. Es decir, este estilo llamado #titulo solo lo puedes usar una vez por página html, ya que el identificador es único, no se repite. Es por esto que en CSS es más normal ver estilos asignados con class que con id.

Si intentas repetir un id, el estilo va a surgir efecto en la mayoría de navegadores, pero no va a validar tu página, con lo que ya sabes, es una mala práctica que no debes utilizar.

Selectores universales en CSS

Veamos otro tipo de selector en CSS, el selector universal, el cual es capaz de seleccionar todos los elementos de una página html.

Por lógica, solo puedes utilizar un selector universal por hoja de estilo. Este se especifica con nombre de asterisco, nada más. Entre las llaves, pon todas las propiedades que quieras que afecten a cualquier elemento html de una página enlazada.

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<h1>Don Quijote de la Mancha</h1>

	<h2>Fragmento para probar tus habilidades con CSS</h2>

	<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
	le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
	Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
	y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
	durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
	Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
	cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
	tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
	que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
	serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
	el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
	el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
	que a mí me suceden, pues a ti no...</p>
</body>
</html>

CSS 

* {
	text-align: center;
}

Resultado en el navegador

El resultado es que quedan todos los elementos compatibles con text-align, centrados, tanto h1, h2 y p o cualquier otro elemento que lo soporte.

selectores css universales

Estos estilos se pueden sobrescribir indicando estilos específicos para cada etiqueta. En el siguiente ejemplo, todos los elementos se centran excepto los párrafos, a los cuales les he indicado explícitamente un valor contradictorio a la norma del selector universal.

CSS 

* {
	text-align: center;
}

p {
	text-align: left;
	color: gold;
}

Resultado en el navegador

El resultado es que quedan todos los elementos compatibles con text-align, centrados, tanto <h1>, <h2> y <p> o cualquier otro elemento que lo soporte, solo que en este caso, sobrescribo el text-align de los párrafos, indicando que estos deben ir a la izquierda, el color es solo para que a parte de sobrescribir, todos los elementos pueden llevar propiedades extra no indicadas en el selector universal.

selectores css3 universales

Selectores de agrupación en CSS

Puedes utilizar los selectores de agrupación para escribir estilos comunes a varios elementos, de este modo, te evitas estar repitiendo propiedades y valores exactamente iguales para cada elemento.
Supongamos que tienes las siguientes etiquetas <h1>, <h2> y <p> del ejemplo de abajo. Quieres que todo el texto aparezca en color azul y centrado a la derecha. Podrías hacerlo con los selectores universales del ejemplo anterior o utilizar los selectores de agrupación.

Página HTML 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Selectores de CSS</title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
	<h1>Don Quijote de la Mancha</h1>

	<h2>Fragmento para probar tus habilidades con CSS</h2>

	<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
	le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
	Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
	y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
	durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
	Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
	cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
	tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
	que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
	serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
	el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
	el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
	que a mí me suceden, pues a ti no...</p>
</body>
</html>

CSS 

h1, h2, p {
    text-align: center;
    color: deepskyblue;
}

Resultado en el navegador

El resultado es que quedan todos los elementos indicados se ven afectados por todas las propiedades que les asignes. De la forma con selectores por elemento html tendrías que haber especificado las mismas propiedades tres veces. Si tienes cincuenta elementos iguales, tendrás que repetir muchas.

selectores css agrupación

Capítulo bastante extenso, pero muy necesario para poder entender todo lo que viene a continuación en el curso.

Ejercicios de CSS

  1. Los ejercicios que ves a continuación, los tienes que realizar con el ejemplo del Quijote o en su defecto con una página html que tenga un elemento <h1>, <h2> y al menos un <p>.
  2. Dale un estilo que solo afecte a la etiqueta h2 en una hoja de css externa (a partir de ahora, los ejercicios se tienen que hacer en hojas externas a no ser que diga lo contrario). El estilo a h2 es libre, pon las propiedades que quieras.
  3. Crea un estilo con selector de clase al elemento h1. Este se llamará titulo_verde y tendrá el texto en color green (verde). Estará alineado a la derecha.
  4. Añade un estilo con selector de clase más al elemento h1 del ejercicio anterior, lo tienes que tener como titulo_verde. Este estilo se llamará titulo_dimensiones y tendrá que tener la propiedad para poner el título en 50px de tamaño de fuente. Al final, entre los dos estilos te debería quedar el título en color verde, alineado a la derecha y con un tamaño de 50px. Es decir, desde la etiqueta h1 tienes que llamar a los dos estilos a la vez.
  5. Crea un estilo con selector de id, el cual se llamará #parrafo_rosa y tendrá un color de fuente pink (rosa). Debes aplicárselo a un párrafo.
  6. Crea un estilo universal que afecte a todo el documento html. Pondrás un tamaño de fuente de 75px.
  7. Crea un estilo con selector de agrupación para h1 y para h2. Las propiedades son libres.

La solución la encontrarás aquí: Haz click aquí.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.