CSS
Tutorial CSS: Selectores avanzados
Aprende a usar selectores avanzados en CSS para estilos precisos con selectores de relación, atributo y el potente selector :not().
Aprende CSS y certifícateSelectores 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:
Selector | Símbolo | Elementos seleccionados |
---|---|---|
Adyacente | + | Solo el elemento inmediatamente siguiente |
Hermanos generales | ~ | Todos los elementos siguientes que coincidan |
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.
Ejercicios de esta lección Selectores avanzados
Evalúa tus conocimientos de esta lección Selectores avanzados con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender y aplicar selectores de relación como el hermano adyacente (+) y hermanos generales (~).
- Utilizar selectores de atributo avanzados para seleccionar elementos según patrones en los valores de sus atributos (comienza con, termina con, contiene).
- Emplear el selector :not() para excluir elementos específicos de una selección y combinarlo con otros selectores.
- Identificar casos prácticos y limitaciones de estos selectores para optimizar el código CSS.
- Combinar selectores avanzados para crear reglas CSS más específicas y mantenibles.