Los selectores CSS son una herramienta esencial para aplicar estilos a los elementos de una página web. Con ellos, podemos seleccionar elementos específicos para modificar su apariencia. Hay varios tipos de selectores en CSS, cada uno con su propia función y uso.
A continuación, te voy a mostrar los tipos de selectores más comunes y algunos ejemplos de código para mostrarte cómo se utilizan.
Empezamos con esta estructura html para ver los ejemplos:
<!doctype html>
<html>
<head>
<title>www.programacionfacil.org</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>Título h1</h1>
<h2>Título h2</h2>
<p>Párrafo 1.</p>
<p>Párrafo 2.</p>
<p>Párrafo 3.</p>
</body>
</html>Los selectores CSS de etiqueta
Hasta ahora, hemos utilizado los selectores CSS de etiqueta en el curso.
Estos selectores seleccionan elementos específicos basados en su etiqueta HTML. Por ejemplo, el selector "p" seleccionaría todos los elementos de párrafo en una página.
p {
color: red;
}Esto va a aplicar la propiedad "color" a todos los párrafos de la página.
Los selectores CSS de clase
Los selectores de clase son unos de los más usados, ya que con ellos, podemos estilizar un estilo CSS en una sola etiqueta html, sin importar si es p, h1, etc.
Para ello, pondremos un punto y luego un nombre que esté relacionado con el cometido del estilo.
.letra_azul {
color:blue;
}Ahora, podemos aplicar este estilo a cualquier elemento html que soporte la propiedad "color". Los elementos de tipo texto como los encabezados h1,h2,h3…, los párrafos, etc.
Como aplicar un estilo CSS de clase
Para aplicar el estilo CSS de clase, debemos indicarlo en todas las etiquetas en las que queramos aplicar ese estilo. Esto lo haremos gracias al atributo html "class".
<!doctype html>
<html>
<head>
<title>www.programacionfacil.org</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1 class="letra_azul">Título h1</h1>
<h2>Título h2</h2>
<p>Párrafo 1.</p>
<p class="letra_azul">Párrafo 2.</p>
<p>Párrafo 3.</p>
</body>
</html>
Los selectores CSS de ID
Este tipo de selector, es parecido al de clase, pero en este caso, se utiliza el atributo html "id" en las etiquetas html.
La diferencia entre el atributo "id" y "class", es que en una misma página html, puede haber tantos class con un valor igual, como en el ejemplo anterior, pero de "id", solo puede haber uno.
Por ejemplo, no debes hacer esto:
<!doctype html>
<html>
<head>
<title>www.programacionfacil.org</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1 id="letra_azul">Título h1</h1>
<h2>Título h2</h2>
<p>Párrafo 1.</p>
<p id="letra_azul">Párrafo 2.</p>
<p>Párrafo 3.</p>
</body>
</html>Si cargas esto en el navegador, se va a mostrar con el color azul, como si fueran "class". Sin embargo, esto presentará fallos a la larga, sobre todo, cuando quieras utilizar estos ID, por ejemplo, con JavaScript.
Personalmente, prefiero no utilizar muy a menudo este tipo de estilos, a no ser que utilice un "id" para hacer algo más que aplicar un estilo, por ejemplo, si lo uso con JavaScript.
Como aplicar un estilo CSS de "id"
La forma correcta de aplicar el estilo de "id" es la siguiente:
#letra_azul {
color:blue;
}En CSS le ponemos el prefijo almohadilla (#).
En la página html ponemos el id en una sola etiqueta:
<!doctype html>
<html>
<head>
<title>www.programacionfacil.org</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>Título h1</h1>
<h2>Título h2</h2>
<p>Párrafo 1.</p>
<p id="letra_azul">Párrafo 2.</p>
<p>Párrafo 3.</p>
</body>
</html>
Tenemos algunos tipos de selectores algo más avanzados. Estos los iremos incorporando más adelante. De momento, vamos a usar solo estos en el curso.
No te pierdas ni un solo capítulo del curso máster en CSS3.
