Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

Selectores Básicos

Selectores de tipo
Selecciona todos los elementos que coinciden con el nombre dado.
Sintáxis: eltname
Ejemplo: input aplicará a cualquier elemento <input>.
Selectores de clase
Selecciona todos los elementos dado un atributo de class.
Sintáxis: .classname
Ejemplo: .index se aplicará a cualquier elemento que tenga la clase "index".
Selectores de ID
Selecciona un elemento basándose en el valor de su atributo id. Debería existir únicamente un elemento con un ID dado en un documento.
Sintáxis: #idname
Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
Selector universal
Selecciona todos los elementos. Puede estar restringido a un espacio de nombres o a todos los espacios de nombres.
Sintáxis: * ns|* *|*
Ejemplo: * se aplicará a todos los elementos del documento.
Selectores de atributo
Selecciona elementos basándose en el valor de un atributo dado.
Sintáxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Ejemplo: [autoplay] se aplicará a todos los elementos que tengan el atributo "autoplay" asignado (a cualquier valor).

Combinadores

Selectores de hermanos adyacentes
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente después del primero, y ambos estos comparten el mismo elemento padre.
Sintaxis: A + B
Ejemplo: Reglas a h2 + p se aplicarán a todos los elementos <p> que siguen directamente a un elemento <h2>.
 
Selectores de hermanos generales
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue después del primero (no necesariamente de forma inmediata), y ambos comparten el mismo elemento padre.
Sintaxis: A ~ B
Ejemplo: Reglas a p ~ span se aplicarán a todos los elementos <span> que siguen un elemento <p>.
Selectores de hijo
El combinador > selecciona los elementos que son hijos directos del primer elemento.
Sintaxis: A > B
Ejemplo: Reglas a ul > li se aplicarán a todos los elementos <li> que son hijos directos de un elemento <ul>.
 
Selectores descendientes
El combinador   selecciona los elementos que son descendientes del primer elemento.
Sintaxis: A B
Ejemplo: Reglas a div span se aplicarán a todos los elementos <span> que están dentro de un elemento <div>.

Pseudoelementos

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

Pseudoclases

Las pseudoclases permiten la selección de los pseudoelementos.
Ejemplo: Reglas a p::first-line se aplicarán a la primera línea de texto de los elementos <p>.

 

Specifications

Specification Status Comment
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Definición inicial

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 o anterior) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

Etiquetas y colaboradores del documento

Colaboradores en esta página: Benji1337, metal-gogo, kikolevante
Última actualización por: Benji1337,