Tipos de selectores en CSS
Última actualización: 01 - 11 - 2023
¿Qué es un selector de CSS?
Es un elemento de CSS que nos permite seleccionar etiquetas, atributos, clases o IDs en el documento HTML al cual le hayamos asignado un archivo CSS. Los selectores CSS nos permiten dar estilos a partes específicas de nuestra página web. ✅
¿Cómo utilizar los selectores CSS?
CSS trabaja con declaraciones y es aquí donde hace acto de presencia el protagonista de este artículo. Para explicar más a fondo los selectores de CSS vamos a ver ejemplos detallados sobre sus características y qué tipo de selectores podemos utilizar para dar estilos a nuestra página web.
Tipos de selectores CSS
Selectores básicos
< > Selector de etiqueta < / >
Selecciona todas las etiquetas HTML que se haya especificado. Solo hay que colocar el nombre del elemento que se quiere modificar y hacer la declaración.
La manera más óptima de aplicar estilos CSS es con un documento externo pero para los ejemplos de los selectores de CSS usaremos una estructura básica de HTML con la etiqueta style para fines didácticos en este artículo. 🙂
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible"content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Seleccionando las etiquetas P -->
p{
color:"red";
}
</style>
</head>
<body>
<p> Selector de etiqueta </p>
<p> Párrafo Random 1 </p>
<p> Párrafo random 2 </p>
</body>
En este ejemplo el color de todos los textos con la etiqueta P será rojo.
. Selector de clase
Selecciona los elementos a los que se les haya asignado una clase en el documento HTML. Su sintaxis es igual al de un selector de etiqueta con un punto (.) previo al selector.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Seleccionando por clase -->
.letra-azul{
color:"blue";
}
</style>
</head>
<body>
<!-- Asignando una clase a una etiqueta -->
<p class="letra-azul"> Selector de clase </p>
<p> Párrafo Random 1 </p>
<p> Párrafo Random 2 </p>
</body>
El primer párrafo se ve afectado por los estilos aplicados en la clase letra-azul. Si hubiera más etiquetas (independientemente de cual sea) con la misma clase asignada también tendrá los mismos estilos.
La ventaja de utilizar selectores de clase es que puede ser usado múltiples veces en diferentes etiquetas, por lo que puedes ahorrar líneas de código CSS si vas a repetir una propiedad en diferentes partes de una web.
# Selector de ID
Este selector comparte la misma sintaxis que el selector de clase, su diferencia está en que usa un numeral o hashtag (#) al inicio de la declaración.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Seleccionando por ID -->
#titulo-h1{
font-size:25px;
}
</style>
</head>
<body>
<!-- Asignando un ID a una etiqueta -->
<h1 id="titulo-h1"> Título Principal Random </h1>
<p> Párrafo Random 1 </p>
<p> Párrafo Random 2 </p>
</body>
El selector de ID solo va a modificar el elemento al que se le haya asignado PERO solo puede haber un selector con el mismo nombre en el documento HTML por lo que no es recomendable para usarlo en CSS. Este selector es más usado para manipular elementos del HTML con JavaScript usando el DOM.
Selector de [Atributo]
Este selector toma elementos del HTML que posean un atributo, como un href en una etiqueta a, un type en una etiqueta input o un src en una etiqueta script. Los atributos son modificadores de comportamiento adicionales de una etiqueta.
La forma de escribir este selector en CSS usa corchetes cuadrados [ ] para especificar el elemento con el tipo de atributo. Veamos un ejemplo con un input.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Seleccionando por atributo -->
input [type = "text"] {
padding:2rem;
}
</style>
</head>
<body>
<input type="text">
</body>
En este caso los inputs que tenga el atributo type="text" se verán afectados por los cambios que se hagan en el CSS pero si hubiesen otros con un atributo diferente, como type="num", no se verían afectados.
* Selector universal
Selecciona todos los elementos de nuestro HTML. Los estilos que se apliquen a este selector se verán reflejados en todas las etiquetas.
Este selector utiliza el asterisco (*) para hacer la selección universal.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Selección universal -->
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<input type="text">
</body>
Este selector puede ser utilizado para dar o quitar valores por defecto del navegador aunque hay que tener cuidado con los valores que se quieren modificar.
Selectores combinadores
Selector de hijos directos
Este selector va a afectar a las etiquetas hijas que se le asigne. Así como la etiqueta body tiene como hijos todos los elementos visuales en el documento HTML (los que vemos en el navegador), hay etiquetas que también poseen elementos internos que se les denominan hijos.
En este ejemplo veremos una etiqueta div con tres elementos hijos diferentes.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Selector de hijos directos-->
div > p{
color:"green";
font-size:"18px";
}
</style>
</head>
<body>
<div>
<h3>Título dentro de un div</h3>
<p>Un párrafo dentro de un div</p>
<p>Otro párrafo dentro de un div</p>
<span>No se me ocurre un nombre original para este 😆</span>
</div>
</body>
Los elementos hijos de este div son un h3, dos p y un span. El selector de hijos directos, representado con el símbolo de mayor que (>) va a afectar a los elementos hijos que coincidan con el elemento seleccionado. (Las etiquetas p de este ejemplo).
Selector de descendientes
Selecciona a los elementos hijos que se encuentren dentro de otro elemento o etiqueta, funciona de manera muy similar al selector de hijos directos.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Selector de descendientes-->
div span{
color:"green";
font-size:"18px";
}
</style>
</head>
<body>
<div>
<h3>Título genérico</h3>
<p>Párrafo genérico</p>
<p>Otro párrafo genéricov</p>
<span>Un span genérico</span>
</div>
</body>
El span dentro de la etiqueta div es el que se va a ver afectado por los estilos.
Selector de elemento adyacente
Selecciona el elemento siguiente que posea la misma "jerarquía familiar" dentro del HTML. Se utiliza el símbolo de suma (+) para elegir la etiqueta a la que se le quiere aplicar los estilos.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Selector de elemento adyacente -->
div + section{
background-color:"purple";
height:"200px";
}
</style>
</head>
<body>
<div>
<h3>Título genérico H3</h3>
<p>Párrafo genérico II</p>
<p>Otro párrafo genéricoII-2</p>
<span>Un span genérico II-2</span>
</div>
<section>
<p>Esta sección se verá afectada por el selector de elemento adyacente</p>
</section>
</body>
La etiqueta div y la etiqueta section poseen la misma jerarquía y pueden considerarse hermanos dentro de su contenedor padre body.
Selector general de hermanos
Este selector trabaja de forma similar al selector de elemento adyacente con la diferencia de que va a afectar a TODOS los elementos hermanos designados dentro del HTML. Utiliza el símbolo de la virgulilla (~) para seleccionar el elemento que va a ser afectado.
<head >
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>Selectores CSS</title>
<style>
<!-- Selector general de hermanos-->
div ~ section{
background-color:"purple";
height:"200px";
}
</style>
</head>
<body>
<div>Div hermano mayor </div>
<section> Elemento hermano del div afectado </section>
<section> Segundo elemento hermano del div afectado </section>
<section> Tercer elemento hermano del div afectado </section>
</body>