Los selectores de CSS son patrones que permiten aplicar estilos a elementos específicos de una página web. Funcionan como reglas que indican qué partes del HTML deben recibir ciertas propiedades de diseño, como colores, tamaños o márgenes. Existen diferentes tipos de selectores, desde los más simples, como los de tipo y clase, hasta los más avanzados, como los combinadores y los pseudo-selectores. Dominar su uso es clave para escribir código CSS eficiente y bien estructurado.
*
Selector Universal
Descripción: Selecciona todos los elementos de la página. Se suele usar para inicializar ciertos valores que vienen preestablecidos en los navegadores, pero hay que tener cuidado con su uso ya que podríamos añadir información innecesaria a nuestro código, como por ejemplo poner los margin y padding a 0 (no aconsejo hacerlo).
HTML
CSS
* {
box-sizing: border-box;
}
En este ejemplo, el selector *, permite aplicar el estilo a todas las etiquetas de HTML. No es necesario especificar nada en HTML.
X
Selector de Etiqueta o selector de tipo
Descripción: Selecciona todos los elementos de un tipo específico.
HTML
<p>Este es un párrafo.</p>
CSS
p {
color: blue;
}
En este ejemplo, el selector p, permite aplicar estilos a todas las etiquetas <p> de HTML.
.X
Selector de clase
Descripción: Selecciona elementos con una clase específica.
HTML
<p class="texto">Este es un párrafo con clase.</p>
CSS
.texto {
font-size: 16px;
}
En este ejemplo, el selector .texto, permite aplicar estilos a todas las clases texto que tengamos aplicadas en cualquier etiqueta de HTML.
#X
Selector de ID
Descripción: Selecciona un elemento con un ID específico.
HTML
<h2 id="titulo2">Título de nivel 2</h2>
CSS
#titulo2 {
font-style: italic;
}
En este ejemplo, el selector #titulo2, permite aplicar estilos únicamente a la etiqueta que lleva este ID único en HTML.
X Y
Selector de descendiente o descendente
Descripción: Selecciona elementos que son descendientes o hijos de otro elemento.
HTML
<div class="especial">
<p>Párrafo dentro de un div.
</p>
</div>
CSS
.especial p {
color: green;
}
En este ejemplo, el selector div.especial p, permite aplicar estilos únicamente a las etiquetas p que sean hijas o descendientes de etiquetas que tienen aplicada la clase especial, en HTML.
X > Y
Selector de hijo directo
Descripción: Selecciona elementos que son hijos directos de otro elemento.
HTML
<div id="contenedor">
<ul>
<li> Item 1
<ul>
<li> Item 1.1</li>
</ul>
</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
</ul>
</div>
CSS
#contenedor > ul{
list-style-type: none;
}
En este ejemplo, el selector #contenedor > ul, permite aplicar estilos únicamente a las etiquetas ul que sean hijas o descendientes directas de #contenedor pero no van a aplicarse estilos a las ul que no sean hijos directos, como es el caso de la ul que contiene al Item 1.1.
X + Y
Selector de hermano adyacente
Descripción: Selecciona el elemento que está inmediatamente después de otro.
HTML
<h1>Título</h1>
<p>Párrafo adyacente al título.</p>
<p>Otro párrafo.</p>
CSS
h1 + p {
font-style: italic;
}
En este ejemplo, el selector h1 + p, permite aplicar estilos únicamente a la etiqueta p que está justo debajo de la etiqueta h1, pero no al resto de etiquetas p del HTML.
X ~ Y
Selector de hermano general
Descripción: Selecciona todos los elementos hermanos que siguen a otro.
HTML
<h1>Título</h1>
<p>Párrafo 1.</p>
<p>Párrafo 2.</p>
CSS
h1 ~ p {
color: purple;
}
En este ejemplo, el selector h1 ~ p, permite aplicar estilos a las etiquetas p que sean hermanas de la etiqueta h1. Es similar al caso de hermano adyacente, pero menos estricto.
X, Y, Z
Selector de grupo
Descripción: Agrupa varios selectores para aplicar el mismo estilo.
HTML
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h2>Título 2b</h2>
CSS
h1, h2, h3 {
color: #00f;
}
En este ejemplo, el selector h1, h2, h3, permite aplicar el mismo estilo a todas las etiquetas h1, h2 y h3 a la vez.
X[atributo]
Selector de atributo
Descripción: Selecciona elementos con un atributo específico.
HTML
<a href="#" target="_blank">Enlace</a>
CSS
a[target="_blank"] {
color: red;
}
En este ejemplo, el selector a[target=»_blank»], permite aplicar estilos únicamente a las etiquetas a que lleven el atributo target=»_blank» en HTML.
También es posible aplicar este selector, indicando únicamente el atributo sin ningún valor, como en el ejemplo siguiente, en el que únicamente se aplicarían estilos a los párrafos que tienen alguna clase.
HTML
<p class="cl1">Párrafo 1 </p>
<p class="cl2">Párrafo 2 </p>
<p>Párrafo 3 </p>
CSS
p[class] {
color: blue;
}
X[atributo^=,,valor,,]
Selector de atributo que comienza con un valor
Descripción: Selecciona elementos cuyo atributo comienza con un valor específico.
HTML
<a href="https://example.com">Enlace seguro</a>
CSS
a[href^="https"] {
color: green;
}
En este ejemplo, el selector a[href^=»https»], permite aplicar estilos únicamente a las etiquetas a cuyo vínculo comienza por «https» y no por otro, por ejemplo las que comienzan por «http».
X[atributo$=,,valor,,]
Selector de atributo que termina con un valor
Descripción: Selecciona elementos cuyo atributo termina con un valor específico.
HTML
<a href="documento.pdf">PDF</a>
CSS
a[href$=".pdf"] {
color: red;
}
En este ejemplo, el selector a[href$=».pdf»], permite aplicar estilos únicamente a las etiquetas a cuyo vínculo termina por «.pdf», con lo que podríamos diferenciar los vínculos que mostrarán un archivo del tipo PDF de un modo diferente al resto.
X[atributo*=,,valor,,]
Selector de atributo que contiene un valor
Descripción: Selecciona elementos cuyo atributo contiene un valor específico.
HTML
<a href="https://google.com">Google</a>
CSS
a[href*="google"] {
color: blue;
}
En este ejemplo, el selector a[href*=»google»], permite aplicar estilos únicamente a las etiquetas a cuyo vínculo contiene el texto «google».
X:hover
Selector de pseudoclase
Descripción: Selecciona elementos en un estado específico.
HTML
<a href="#">Enlace</a>
CSS
a:hover {
color: orange;
}
En este ejemplo, el selector a:hover, permite aplicar estilos a todas las etiquetas a cuando el ratón se coloca encima de ellas.
X:first-child
Selector de pseudoclase
Descripción: Selecciona el primer hijo de un elemento.
HTML
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ul>
CSS
li:first-child {
font-weight: bold;
}
En este ejemplo, el selector li:first-child, permite aplicar estilos únicamente al primer li que está dentro de ul.
X:last-child
Selector de pseudoclase
Descripción: Selecciona el último hijo de un elemento.
HTML
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ul>
CSS
li:last-child {
color: red;
}
En este ejemplo, el selector li:last-child, permite aplicar estilos únicamente al último li que está dentro de ul.
X:nth-child(nº)
Selector de pseudoclase
Descripción: Selecciona un hijo específico basado en su posición.
HTML
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
CSS
li:nth-child(2) {
color: green;
}
En este ejemplo, el selector li:nth-child(2), permite aplicar estilos únicamente al segundo li que está dentro de ul, porque hemos puesto como valor el nº 2.
X:nth-of-type(nº)
Selector de pseudoclase
Descripción: Selecciona un elemento específico basado en su tipo y posición.
HTML
<p>Párrafo 1</p>
<p>Párrafo 2</p>
CSS
p:nth-of-type(2) {
color: purple;
}
En este ejemplo, el selector p:nth-of-type(2), permite aplicar estilos únicamente al segundo p, porque es el segundo elemento del tipo p.
X:not(selector)
Selector de pseudoclase
Descripción: Selecciona elementos que no coinciden con un selector.
HTML
<p>Párrafo normal</p>
<p class="especial">Párrafo especial</p>
CSS
p:not(.especial) {
color: gray;
}
En este ejemplo, el selector p:not(.especial), permite aplicar estilos a todos los p que no tengan la clase especial.
X:focus
Selector de pseudoclase
Descripción: Selecciona un elemento cuando está enfocado.
HTML
<input type="text" placeholder="Escribe aquí">
CSS
input:focus {
border-color: blue;
}
En este ejemplo, el selector input:focus, permite aplicar estilos únicamente al input que tiene el foco (el que está activo). Esta pseudo clase únicamente se utiliza dentro de formularios.
input:checked
Selector de pseudoclase
Descripción: Selecciona elementos de formulario que están seleccionados.
HTML
<input type="checkbox">Opción 1
<input type="checkbox">Opción 2
<input type="checkbox">Opción 3
CSS
input:checked {
outline: 2px solid green;
}
En este ejemplo, el selector input:checked, permite aplicar estilos únicamente a las casillas de verificación que están seleccionadas.
input:disabled
Selector de pseudoclase
Descripción: Selecciona elementos de formulario deshabilitados.
HTML
<input type="text" disabled placeholder="Deshabilitado">
CSS
input:disabled {
background-color: #ccc;
}
En este ejemplo, el selector input:disabled, permite aplicar estilos únicamente a input que tienen el atributo disabled, es decir están desabilitados para su edición.
input:enabled
Selector de pseudoclase
Descripción: Selecciona elementos de formulario habilitados
HTML
<input type="text" placeholder="Habilitado">
CSS
input:enabled {
background-color: #fff;
}
En este ejemplo, el selector input:enabled, permite aplicar estilos únicamente a input que no tienen el atributo disabled, es decir están habilitados para su edición.
X:empty
Selector de pseudoclase
Descripción: Selecciona elementos que no tienen hijos.
HTML
<div></div>
<div>
<p>este div no está vacío</p>
</div>
CSS
div:empty {
display: none;
}
En este ejemplo, el selector div:empty, permite aplicar estilos únicamente a las etiquetas div que estén vacías.
X::first-line
Selector de pseudoelemento
Descripción: Selecciona una parte específica de un elemento (primera línea).
HTML
<p>Este es un párrafo con la primera línea en negrita... Se necesita un texto más largo para comprobar que funciona...</p>
CSS
p::first-line {
font-weight: bold;
}
En este ejemplo, el selector p::first-line, permite aplicar estilo a la primera letra del párrafo, pero no al resto de líneas que contiene.
X::first-letter
Selector de pseudoelemento
Descripción: Selecciona una parte específica de un elemento (primera letra).
HTML
<p>Este es un párrafo con la primera letra en tamaño mayor.</p>
CSS
p::first-letter {
font-size: 3em;
}
En este ejemplo, el selector p::first-letter, permite aplicar estilo a la primera letra del párrafo.
X::before
Selector de pseudoelemento
Descripción: Inserta contenido antes de un elemento.
HTML
<p>Este es un párrafo</p>
CSS
p::before {
content: "👉";
}
En este ejemplo, el selector p::before, permite insertar el símbolo «mano» delante del texto del párrafo.
X::after
Selector de pseudoelemento
Descripción: Inserta contenido antes de un elemento.
HTML
<p>Este es un párrafo</p>
CSS
p::after {
content: "👈";
}
En este ejemplo, el selector p::after, permite insertar el símbolo «mano» detrás del texto del párrafo.
