Cargando...
Guía Completa de Selectores CSS
Esta guía completa de selectores CSS proporciona a los desarrolladores un recurso exhaustivo para identificar y aplicar correctamente todos los selectores disponibles en CSS moderno. Diseñada para un uso rápido durante el desarrollo, esta referencia cubre selectores básicos, combinadores, selectores de atributos, pseudo-clases estructurales, de acción del usuario, de estado de formularios, de enlaces, lógicos, pseudo-elementos, selectores avanzados y selectores de consultas de medios. Cada categoría incluye ejemplos prácticos y compatibilidad con navegadores, facilitando la creación de estilos precisos, la optimización del código y la implementación de interfaces modernas y responsivas sin conflictos de estilo.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | Selector universal - selecciona todos los elementos | * { margin: 0; } | Todos los navegadores |
| element | tagname | Selector de tipo - selecciona todos los elementos de un tipo específico | p { color: blue; } | Todos los navegadores |
| .class | .classname | Selector de clase - selecciona elementos con una clase específica | .highlight { background: yellow; } | Todos los navegadores |
| \#id | #idname | Selector ID - selecciona un elemento con un ID específico | #header { width: 100%; } | Todos los navegadores |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | Selector descendiente - selecciona B dentro de A | div p { margin: 10px; } | Todos los navegadores |
| child | A > B | Selector hijo - selecciona B directo hijo de A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | Selector hermano adyacente - selecciona B inmediatamente después de A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | Selector hermano general - selecciona todos los hermanos B que siguen a A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | Selecciona elementos con el atributo especificado | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Selecciona elementos donde el atributo es igual al valor | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Selecciona elementos donde el atributo contiene la palabra especificada | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Selecciona elementos donde el atributo comienza con el valor | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Selecciona elementos donde el atributo termina con el valor | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Selecciona elementos donde el atributo contiene el valor | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Coincidencia de atributo sin distinción de mayúsculas/minúsculas | \[type="EMAIL" i] { text-transform: lowercase; } | Navegadores modernos |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | Selecciona el primer hijo de un elemento | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Selecciona el último hijo de un elemento | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | Selecciona el n-ésimo hijo | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | Selecciona el n-ésimo hijo desde el final | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | Selecciona el n-ésimo elemento de su tipo | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | Selecciona el n-ésimo elemento de su tipo desde el final | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Selecciona el primer elemento de su tipo | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Selecciona el último elemento de su tipo | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Selecciona el elemento que es el único hijo | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Selecciona el único elemento de su tipo | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Selecciona elementos sin hijos | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | Selecciona elemento al pasar el ratón sobre él | a:hover { color: red; } | Todos los navegadores |
| :active | :active | Selecciona elemento cuando está activo/clickeado | button:active { transform: scale(0.95); } | Todos los navegadores |
| :focus | :focus | Selecciona elemento con foco | input:focus { outline: 2px solid blue; } | Todos los navegadores |
| :focus-visible | :focus-visible | Selecciona elemento cuando es visiblemente enfocado | button:focus-visible { outline: 2px solid; } | Navegadores modernos |
| :focus-within | :focus-within | Selecciona elemento que contiene un elemento con foco | form:focus-within { border: 1px solid blue; } | Navegadores modernos |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | Selecciona elementos de formulario habilitados | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Selecciona elementos de formulario deshabilitados | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | Selecciona checkboxes/radios seleccionados | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Selecciona checkboxes en estado indeterminado | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Selecciona elementos de formulario válidos | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Selecciona elementos de formulario inválidos | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Selecciona elementos requeridos | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | Selecciona elementos opcionales | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Selecciona elementos de solo lectura | input:read-only { background: #f9f9f9; } | Navegadores modernos |
| :read-write | :read-write | Selecciona elementos editables | input:read-write { background: white; } | Navegadores modernos |
| :placeholder-shown | :placeholder-shown | Selecciona elementos mostrando placeholder | input:placeholder-shown { font-style: italic; } | Navegadores modernos |
| :in-range | :in-range | Selecciona elementos con valor dentro del rango | input:in-range { border-color: green; } | Navegadores modernos |
| :out-of-range | :out-of-range | Selecciona elementos con valor fuera del rango | input:out-of-range { border-color: red; } | Navegadores modernos |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | Selecciona enlaces no visitados | a:link { color: blue; } | Todos los navegadores |
| :visited | :visited | Selecciona enlaces visitados | a:visited { color: purple; } | Todos los navegadores |
| :any-link | :any-link | Selecciona todos los enlaces | a:any-link { text-decoration: underline; } | Navegadores modernos |
| :target | :target | Selecciona elemento objetivo de la URL actual | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Selecciona elementos que no coinciden con el selector | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Selecciona elementos que coinciden con cualquier selector | :is(h1, h2, h3) { margin-top: 0; } | Navegadores modernos |
| :where(selector) | :where(sel1, sel2) | Igual a :is, pero con especificidad 0 | :where(h1, h2) { color: blue; } | Navegadores modernos |
| :has(selector) | :has(sel) | Selecciona elementos que contienen el selector | div:has(img) { border: 1px solid; } | Navegadores modernos |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | Inserta contenido antes del elemento | p::before | |
| ::after | ::after | Inserta contenido después del elemento | p::after { content: " ←"; } | IE9+ (dos puntos IE8+) |
| ::first-line | ::first-line | Selecciona la primera línea de texto | p::first-line { font-weight: bold; } | IE9+ (dos puntos IE6+) |
| ::first-letter | ::first-letter | Selecciona la primera letra de texto | p::first-letter { font-size: 2em; } | IE9+ (dos puntos IE6+) |
| ::selection | ::selection | Selecciona texto resaltado por el usuario | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Selecciona texto del placeholder | input::placeholder { color: #999; } | Navegadores modernos |
| ::backdrop | ::backdrop | Selecciona fondo de elemento en fullscreen | dialog::backdrop { background: rgba(0,0,0,0.5); } | Navegadores modernos |
| ::marker | ::marker | Selecciona marcadores de lista | li::marker { color: red; } | Navegadores modernos |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | Selecciona el elemento raíz del documento | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | Selecciona el elemento de ámbito | :scope > p { margin: 0; } | Navegadores modernos |
| :defined | :defined | Selecciona elementos personalizados definidos | custom-element:defined { opacity: 1; } | Navegadores modernos |
| :host | :host | Selecciona el host de shadow DOM | :host { display: block; } | Navegadores modernos |
| :host(selector) | :host(sel) | Selecciona host que coincide con selector | :host(.active) { color: red; } | Navegadores modernos |
| :host-context(selector) | :host-context(sel) | Selecciona host en un contexto específico | :host-context(.dark) { color: white; } | Navegadores modernos |
| ::slotted(selector) | ::slotted(sel) | Selecciona contenido insertado en slot | ::slotted(p) { margin: 0; } | Navegadores modernos |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | Aplica estilos según condiciones de media | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Aplica estilos si el navegador soporta la propiedad | @supports (display: grid) { .layout { display: grid; } } | Navegadores modernos |
| @container | @container (condition) | Aplica estilos según tamaño del contenedor | @container (min-width: 400px) { .card { flex-direction: row; } } | Navegadores modernos |
Quick Examples
css
CSS Code
/* Combinación de selectores básicos */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Selectores de atributos para formularios */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-elementos para estilo avanzado */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Selectores estructurales avanzados */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Selectores lógicos modernos */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}Mejores prácticas y consejos:
Use selectores específicos para evitar conflictos de estilo no deseados. Prefiera selectores de clase sobre ID para reutilización. Combine selectores de manera eficiente para reducir el tamaño del CSS. Pruebe pseudo-clases en diferentes navegadores. Use :not() con cuidado, ya que puede afectar el rendimiento. Recuerde que los pseudo-elementos crean elementos virtuales en el DOM. Considere la especificidad al usar combinaciones complejas de selectores. Use selectores de atributos para estilos dinámicos de formularios. Pruebe selectores modernos como :has() y :is() según compatibilidad. Agrupe selectores relacionados para mejor organización. Use selectores descendientes con moderación para evitar sobreanidamiento. Algunos pseudo-clases solo funcionan con ciertos elementos.
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Reference Knowledge Check
Pruebe sus conocimientos sobre selectores CSS y su uso.
3
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior