--- title: Selectores CSS slug: Web/CSS/CSS_Selectors tags: - CSS - Referencia - Selectores - Selectores de CSS - Visión general translation_of: Web/CSS/CSS_Selectors original_slug: Web/CSS/Selectores_CSS ---
{{CSSRef}}

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

Selectores básicos

Selector de tipo
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
Sintaxis: eltname
Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
Selector de clase
Selecciona todos los elementos que tienen el atributo de class especificado.
Sintaxis: .classname
Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
Selector de ID
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
Sintaxis: #idname
Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
Selector universal
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
Sintaxis: * ns|* *|*
Ejemplo: * se aplicará a todos los elementos del documento.
Selector de atributo
Selecciona elementos basándose en el valor de un determinado atributo.
Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).

Combinadores

Combinador de hermanos adyacentes
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
Sintaxis: A + B
Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
Combinador general de hermanos
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
Sintaxis: A ~ B
Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
Combinador de hijo
El combinador > selecciona los elementos que son hijos directos del primer elemento.
Sintaxis: A > B
Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
Combinador de descendientes
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
Sintaxis: A B
Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
Combinador de columna {{Experimental_Inline}}
El combinador || selecciona los elementos especificados pertenecientes a una columna.
Sintaxis: A || B
Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.

Pseudoclases

Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.

Pseudoelementos

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.

Especificaciones

Especificación Estado Comentario
{{SpecName('CSS4 Selectors')}} {{Spec2('CSS4 Selectors')}} Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}} {{Spec2('CSS3 Selectors')}} Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}} {{Spec2('CSS2.1')}} Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}} {{Spec2('CSS1')}} Definición inicial.