Tutorial CSS: Selectores avanzados

Selectores de relación: adyacente (+) y hermanos generales (~)

Los selectores de relación en CSS nos permiten seleccionar elementos basándonos en su posición relativa a otros elementos dentro del árbol DOM. Estos selectores son especialmente útiles cuando necesitamos aplicar estilos a elementos que comparten un mismo padre pero sin tener que añadir clases adicionales.

Selector de hermano adyacente (+)

El selector de hermano adyacente (+) selecciona un elemento que está inmediatamente después de otro elemento específico, siempre que ambos compartan el mismo elemento padre.

La sintaxis es:

elemento1 + elemento2 { /* estilos */ }

Donde elemento2 será seleccionado solo si:

• Aparece inmediatamente después de elemento1
• Ambos comparten el mismo padre

Veamos algunos ejemplos prácticos:

h2 + p {
  font-weight: bold;
  color: #3498db;
}

Este código selecciona cualquier párrafo (p) que esté inmediatamente después de un encabezado de nivel 2 (h2). Solo afecta al primer párrafo que sigue al encabezado, no a todos los párrafos posteriores.

Ejemplo en contexto:

<section>
  <h2>Título de sección</h2>
  <p>Este párrafo será seleccionado y tendrá texto en negrita y color azul.</p>
  <p>Este segundo párrafo NO será seleccionado por el selector h2 + p.</p>
</section>

El selector de hermano adyacente es muy útil para situaciones como:

• Estilizar el primer párrafo después de un encabezado de manera diferente
• Añadir márgenes específicos entre elementos consecutivos
• Crear efectos visuales en listas o menús cuando un elemento sigue a otro

.tag + .tag {
  margin-left: 10px;
}

Este ejemplo añade un margen izquierdo a cualquier elemento con clase .tag que siga inmediatamente a otro elemento con la misma clase, creando una separación visual entre etiquetas consecutivas.

Selector de hermanos generales (~)

El selector de hermanos generales (~) es similar al selector de hermano adyacente, pero con una diferencia crucial: selecciona todos los elementos que siguen a otro elemento específico, no solo el inmediatamente adyacente.

La sintaxis es:

elemento1 ~ elemento2 { /* estilos */ }

Donde elemento2 será seleccionado si:

• Aparece después de elemento1 (no necesariamente de forma inmediata)
• Ambos comparten el mismo padre

Veamos un ejemplo:

h2 ~ p {
  font-style: italic;
  color: #7f8c8d;
}

Este código selecciona todos los párrafos que siguen a un encabezado h2 dentro del mismo contenedor padre.

Ejemplo en contexto:

<section>
  <p>Este párrafo NO será seleccionado porque está antes del h2.</p>
  <h2>Título de sección</h2>
  <p>Este párrafo será seleccionado y tendrá texto en cursiva.</p>
  <div>Este div interrumpe los párrafos pero no afecta al selector.</div>
  <p>Este párrafo también será seleccionado aunque haya otros elementos entre medias.</p>
</section>

El selector de hermanos generales es particularmente útil para:

• Estilizar todos los elementos de un tipo que siguen a un elemento específico
• Crear efectos visuales en secciones completas después de un elemento destacado
• Modificar la apariencia de elementos en función de la presencia de un elemento anterior

.active-section ~ article {
  opacity: 0.7;
}

Este ejemplo reduce la opacidad de todos los elementos article que aparecen después de un elemento con la clase .active-section.

Diferencias clave y casos de uso

Es importante entender las diferencias entre estos dos selectores:

Veamos un ejemplo comparativo:

<div class="container">
  <h3>Título</h3>
  <p>Primer párrafo</p>
  <p>Segundo párrafo</p>
  <p>Tercer párrafo</p>
</div>

Con estos selectores:

/* Solo selecciona el primer párrafo */
h3 + p {
  color: red;
}

/* Selecciona todos los párrafos después del h3 */
h3 ~ p {
  background-color: #f8f9fa;
}

Combinando selectores de relación

Podemos combinar estos selectores con otros para crear selecciones más específicas:

.featured + article img {
  border: 2px solid gold;
}

nav li:hover ~ li {
  color: #95a5a6;
}

El primer ejemplo selecciona todas las imágenes dentro de un artículo que sigue inmediatamente a un elemento con clase .featured.

El segundo ejemplo reduce la intensidad del color de todos los elementos de lista que siguen al elemento sobre el que está el cursor.

Consideraciones prácticas

• Estos selectores solo funcionan con elementos hermanos (que comparten el mismo padre)
• No pueden seleccionar elementos que aparecen antes en el DOM
• Son muy útiles para crear efectos en cascada o estilos secuenciales
• Ayudan a reducir la necesidad de clases adicionales en el HTML

/* Ejemplo práctico: separar elementos de formulario */
label ~ input {
  margin-top: 5px;
}

/* Ejemplo: estilizar elementos de lista consecutivos */
li.selected + li {
  border-top: none;
}

Los selectores de relación son herramientas poderosas que nos permiten escribir CSS más limpio y semántico, aprovechando la estructura natural del HTML en lugar de depender exclusivamente de clases.

Selectores de atributo avanzados: comienza (^=), termina ($=), contiene (*=)

Los selectores de atributo en CSS nos permiten aplicar estilos a elementos HTML basándonos en la presencia o valor de sus atributos. Mientras que los selectores básicos nos permiten seleccionar elementos por su tipo, clase o ID, los selectores de atributo avanzados nos ofrecen un control mucho más preciso al permitirnos seleccionar elementos según patrones específicos dentro de los valores de sus atributos.

Selector de atributo que comienza con (^=)

El selector [atributo^="valor"] selecciona elementos cuyo valor del atributo especificado comienza exactamente con el texto indicado.

La sintaxis es:

[atributo^="valor"] { /* estilos */ }

Este selector es particularmente útil cuando queremos seleccionar elementos cuyos atributos comienzan con un patrón específico. Veamos algunos ejemplos prácticos:

/* Selecciona todos los enlaces que apuntan a páginas HTTPS */
a[href^="https"] {
  background-color: #e8f5e9;
  padding-left: 20px;
  background-image: url('secure-icon.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px;
}

Este código selecciona todos los enlaces cuyo atributo href comienza con "https" y les añade un icono de seguridad junto con un fondo verde claro.

Otro ejemplo práctico:

/* Estiliza todos los elementos con clases que empiezan por "btn-" */
[class^="btn-"] {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

Este selector aplicará estilos a elementos con clases como btn-primary, btn-secondary, btn-danger, etc., lo que nos permite crear un estilo base para todos nuestros botones.

Selector de atributo que termina con ($=)

El selector [atributo$="valor"] selecciona elementos cuyo valor del atributo especificado termina exactamente con el texto indicado.

La sintaxis es:

[atributo$="valor"] { /* estilos */ }

Este selector es ideal para seleccionar elementos basados en la extensión o terminación de un valor de atributo:

/* Estiliza enlaces a documentos PDF */
a[href$=".pdf"] {
  color: #d50000;
  font-weight: bold;
  padding-right: 20px;
  background-image: url('pdf-icon.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}

Este código selecciona todos los enlaces que terminan en ".pdf" y les añade un icono de PDF junto con un color rojo para destacarlos.

Podemos aplicar este selector a diferentes tipos de archivos:

/* Estiliza enlaces según el tipo de archivo */
a[href$=".jpg"], 
a[href$=".png"], 
a[href$=".gif"] {
  padding-right: 18px;
  background-image: url('image-icon.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}

a[href$=".doc"], 
a[href$=".docx"] {
  padding-right: 18px;
  background-image: url('word-icon.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}

Selector de atributo que contiene (*=)

El selector [atributo*="valor"] selecciona elementos cuyo valor del atributo especificado contiene el texto indicado en cualquier posición.

La sintaxis es:

[atributo*="valor"] { /* estilos */ }

Este selector es el más flexible de los tres, ya que selecciona elementos donde el valor especificado aparece en cualquier parte del atributo:

/* Selecciona todos los enlaces que contienen "example" en su URL */
a[href*="example"] {
  text-decoration: underline dotted;
  color: #0277bd;
}

Este código selecciona enlaces que contienen "example" en cualquier parte de su URL, como "https://example.com" o "https://mysite.com/example-page".

Un caso de uso común es seleccionar elementos según palabras clave en sus atributos:

/* Estiliza elementos que contienen ciertas palabras clave en su clase */
[class*="card"] {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Selecciona elementos con data-attributes específicos */
[data-info*="important"] {
  border-left: 3px solid #f44336;
  padding-left: 10px;
}

Comparación y casos de uso prácticos

Para entender mejor cuándo usar cada selector, veamos una comparación con el mismo conjunto de elementos:

<div class="btn-primary">Botón primario</div>
<div class="primary-btn">Botón primario alternativo</div>
<div class="btn-primary-large">Botón primario grande</div>
<div class="large-primary-btn">Botón primario grande alternativo</div>

Con estos selectores:

/* Selecciona solo el primer elemento */
[class^="btn-"] {
  background-color: #e3f2fd;
}

/* Selecciona solo el segundo elemento */
[class$="-btn"] {
  background-color: #fff3e0;
}

/* Selecciona todos los elementos que contienen "primary" */
[class*="primary"] {
  color: #1976d2;
  font-weight: bold;
}

Combinando selectores de atributo

Podemos combinar estos selectores entre sí o con otros selectores para crear selecciones más específicas:

/* Selecciona inputs de tipo texto que comienzan con "user" */
input[type="text"][name^="user"] {
  border-color: #2196f3;
}

/* Selecciona enlaces externos (que no son del mismo dominio) */
a[href^="http"][href*=":"][href*="//"][href*="."][href$=".com"]:not([href*="mywebsite.com"]) {
  color: #ff5722;
  padding-right: 16px;
  background-image: url('external-link.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px;
}

Sensibilidad a mayúsculas y minúsculas

Por defecto, los selectores de atributo son sensibles a mayúsculas y minúsculas. Si necesitamos hacer una selección insensible a mayúsculas/minúsculas, podemos usar el modificador i:

/* Selecciona elementos con href que contiene "example" sin importar mayúsculas/minúsculas */
a[href*="example" i] {
  color: #673ab7;
}

Este selector coincidirá con "example", "Example", "EXAMPLE", etc.

Aplicaciones prácticas en desarrollo web

Los selectores de atributo avanzados son especialmente útiles en estos escenarios:

• Estilizar enlaces según su destino (internos, externos, correos, descargas)
• Aplicar estilos a campos de formulario basados en sus nombres o tipos
• Crear sistemas de componentes seleccionando elementos con prefijos comunes
• Estilizar elementos según sus data-attributes para comportamientos específicos

/* Estilizar campos de formulario según su propósito */
input[name*="email"] {
  background-image: url('email-icon.png');
  background-repeat: no-repeat;
  background-position: 8px center;
  padding-left: 32px;
}

/* Estilizar elementos con data-attributes */
[data-status*="pending"] {
  background-color: #fff9c4;
}

[data-status*="approved"] {
  background-color: #c8e6c9;
}

[data-status*="rejected"] {
  background-color: #ffcdd2;
}

Estos selectores de atributo avanzados nos permiten escribir CSS más modular y mantenible, reduciendo la necesidad de añadir clases adicionales a nuestro HTML y aprovechando la estructura semántica existente.

Selector :not() para exclusión de elementos

El selector de negación :not() es una poderosa herramienta en CSS que nos permite aplicar estilos a elementos que no coinciden con un selector específico. Este selector es particularmente útil cuando necesitamos excluir ciertos elementos de un conjunto más amplio, lo que nos permite escribir código CSS más limpio y eficiente.

La sintaxis básica del selector :not() es:

:not(selector) {
  /* estilos */
}

Donde selector puede ser cualquier selector simple como un tipo de elemento, clase, ID, atributo o pseudo-clase.

Funcionamiento básico

El selector :not() selecciona todos los elementos que no coinciden con el selector especificado dentro de los paréntesis. Veamos un ejemplo sencillo:

/* Aplica un margen a todos los párrafos excepto aquellos con clase "no-margin" */
p:not(.no-margin) {
  margin-bottom: 20px;
}

En este ejemplo, todos los párrafos tendrán un margen inferior de 20px, excepto aquellos que tengan la clase no-margin.

Casos de uso comunes

El selector :not() es extremadamente útil en muchas situaciones cotidianas de desarrollo web:

1. Eliminar estilos del último elemento

/* Añade un borde inferior a todos los elementos de lista excepto el último */
li:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}

Este código añade un borde inferior a todos los elementos de lista excepto el último, evitando así tener que usar li:last-child { border-bottom: none; } como solución alternativa.

2. Estilizar elementos impares o pares

/* Colorea todas las filas excepto las pares */
tr:not(:nth-child(even)) {
  background-color: #f5f5f5;
}

3. Excluir elementos deshabilitados

/* Aplica un efecto hover solo a botones que no estén deshabilitados */
button:not([disabled]):hover {
  background-color: #2196f3;
  color: white;
}

4. Excluir múltiples selectores (CSS moderno)

En CSS moderno, podemos usar :not() con una lista de selectores separados por comas:

/* Selecciona todos los inputs excepto checkboxes y radios */
input:not([type="checkbox"], [type="radio"]) {
  padding: 8px 12px;
  border-radius: 4px;
}

Este ejemplo selecciona todos los inputs excepto los de tipo checkbox y radio, aplicándoles un padding y border-radius específicos.

Combinando :not() con otros selectores

El selector :not() se puede combinar con otros selectores para crear selecciones más específicas:

/* Selecciona todos los enlaces dentro de .nav que no tengan la clase .active */
.nav a:not(.active) {
  color: #757575;
}

/* Selecciona todos los párrafos que no están dentro de un article */
p:not(article p) {
  font-size: 16px;
}

Anidamiento de :not()

También podemos anidar selectores :not() para crear condiciones más complejas:

/* Selecciona elementos que no tienen la clase .primary y tampoco tienen la clase .secondary */
.button:not(.primary):not(.secondary) {
  background-color: #e0e0e0;
}

Ejemplos prácticos en interfaces de usuario

Menús de navegación

/* Estiliza elementos de menú que no están activos ni tienen submenús */
.menu-item:not(.active):not(.has-submenu) {
  opacity: 0.8;
}

.menu-item:not(.active):not(.has-submenu):hover {
  opacity: 1;
  text-decoration: underline;
}

Formularios

/* Aplica estilos a todos los campos de formulario excepto botones y elementos ocultos */
form input:not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;
}

Tarjetas o elementos de lista

/* Elimina el margen derecho de las tarjetas que no son la última en su fila */
.card:not(:nth-child(3n)) {
  margin-right: 20px;
}

/* Aplica un borde superior a todos los elementos excepto el primero */
.list-item:not(:first-child) {
  border-top: 1px solid #eee;
}

Limitaciones y consideraciones

Es importante tener en cuenta algunas limitaciones del selector :not():

• En versiones antiguas de CSS, :not() solo acepta selectores simples (no selectores compuestos o listas de selectores).
• No se puede usar para seleccionar elementos padres o ancestros (limitación general de CSS, no específica de :not()).
• Puede afectar al rendimiento si se usa en exceso o con selectores muy complejos.

/* Esto funciona en CSS moderno pero no en navegadores antiguos */
div:not(.class1, .class2) {
  color: blue;
}

/* Para compatibilidad con navegadores antiguos, usar múltiples :not() */
div:not(.class1):not(.class2) {
  color: blue;
}

Uso con pseudo-elementos

Es importante señalar que :not() no funciona con pseudo-elementos como ::before y ::after:

/* Esto NO funcionará */
p:not(::first-line) {
  color: blue;
}

Ejemplos de código en proyectos reales

Veamos algunos ejemplos de cómo se utiliza :not() en situaciones de desarrollo web comunes:

Sistema de grid responsive

/* Aplica margen a todas las columnas excepto las que están al final de cada fila */
.col:not(:nth-child(4n)) {
  margin-right: 2%;
}

/* Elimina el margen inferior de la última fila de elementos */
.row .col:not(:nth-last-child(-n+4)) {
  margin-bottom: 20px;
}

Estilización de tablas

/* Estiliza todas las celdas excepto las de encabezado */
td:not(thead td) {
  font-weight: normal;
  padding: 8px 12px;
}

/* Aplica bordes a todas las filas excepto la primera y la última */
tr:not(:first-child):not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}

Navegación por pestañas

/* Estiliza pestañas inactivas */
.tab:not(.active) {
  background-color: #f5f5f5;
  border-bottom: none;
}

/* Cuando se pasa el cursor sobre pestañas inactivas */
.tab:not(.active):hover {
  background-color: #e0e0e0;
}

El selector :not() es una herramienta fundamental en el arsenal de cualquier desarrollador CSS moderno, permitiéndonos escribir reglas más limpias y mantenibles al evitar la necesidad de anular estilos con declaraciones adicionales. Su capacidad para excluir elementos específicos de un conjunto más amplio nos ayuda a mantener nuestro código CSS más DRY (Don't Repeat Yourself) y más fácil de mantener a largo plazo.