English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Los selectores de CSS se utilizan para seleccionar el patrón de estilo de los elementos que deseas
"CSS" columna representa la definición de atributos en las versiones de CSS (CSS1CSS2o para CSS3)
| Selector | Ejemplo | Descripción | Versión de CSS |
|---|---|---|---|
| .class | .intro | Elegir todos los elementos con class="intro" | 1 |
| #id | #firstname | Elegir todos los elementos con id="firstname" | 1 |
| * | * | Elegir todos los elementos | 2 |
| element | p | Elegir todos los <p> elementos | 1 |
| elemento,elemento | div,p | Elegir todos los elementos <div> y <p> | 1 |
| element element | div p | Elegir todos los <p> elementos dentro de un elemento <div> | 1 |
| element>element | div>p | Elegir todos los <p> elementos que son hijos directos de un elemento <div> | 2 |
| element+element | div+p | Elegir todos los <p> elementos que siguen inmediatamente después del elemento <div> | 2 |
| [attribute] | [target] | Elegir todos los elementos con atributo target | 2 |
| [attribute=value] | [target=-blank] | Elegir todos los elementos que utilizan target="-los elementos de "blank" | 2 |
| [attribute~=value] | [title~=flower] | Elegir todos los elementos con el atributo title que contiene la palabra "flower" | 2 |
| [attribute|=language] | [lang|=en] | Elegir todos los elementos con el atributo lang que comienza con "en" | 2 |
| [attribute^=value] | a[src^="https"] | Elegir cada elemento con el valor de atributo src que comienza con "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Elegir cada elemento con el valor de atributo src que termina con ".pdf" | 3 |
| [attribute*=value] | a[src*="w3codebox"] | Elegir cada valor de atributo src que contenga la subcadena "w"3los elementos de "codebox" | 3 |
| :link | a:link | Elegir todos los enlaces no visitados | 1 |
| :visited | a:visited | Elegir todos los enlaces visitados | 1 |
| :active | a:active | Elegir el enlace activo | 1 |
| :hover | a:hover | Elegir cuando el ratón está sobre el enlace | 1 |
| :focus | input:focus | Elegir el elemento de entrada con el foco | 2 |
| :first-letter | p:first-letter | Elegir cada primera letra de cada <p> elemento | 1 |
| :first-line | p:first-line | Elegir cada primera línea de cada <p> elemento | 1 |
| :first-child | p:first-child | Especificar el estilo para cuando el <p> elemento es el primer hijo de su padre | 2 |
| :before | p:before | Insertar contenido antes de cada <p> elemento | 2 |
| :after | p:after | Insertar contenido después de cada <p> elemento | 2 |
| :lang(language) | p:lang(it) | Elegir todos los elementos <p> que tengan un atributo lang con el valor de inicio "it" | 2 |
| element1~element2 | p~ul | Elegir cada elemento ul que sigue a un elemento p | 3 |
| :first-of-type | p:first-of-type | Elegir cada elemento p que es el primer elemento p de su padre | 3 |
| :last-of-type | p:last-of-type | Elegir cada elemento p que es el último elemento p de su padre | 3 |
| :only-of-type | p:only-of-type | Elegir cada elemento p que es el único elemento p de su padre | 3 |
| :only-child | p:only-child | Elegir cada elemento p que es el único hijo de su padre | 3 |
| :nth-child(n) | p:nth-child(2) | Elegir cada elemento p que es el segundo hijo de su padre | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Elegir cada elemento p que es el segundo hijo de su padre, contando desde el último hijo | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Elegir cada elemento p que es el segundo elemento de su padre | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Elegir cada elemento p que es el segundo elemento p de su padre, contando desde el último hijo | 3 |
| :last-child | p:last-child | Elegir cada elemento p que es el último hijo de su padre | 3 |
| :root | :root | Elegir el elemento raíz del documento | 3 |
| :empty | p:empty | Elegir cada elemento p sin subelementos (que incluye nodos de texto) | 3 |
| :target | #news:target | Elegir cada elemento #news activo (que incluye la URL del clic del nombre del ancla) | 3 |
| :enabled | input:enabled | Elegir cada elemento de entrada habilitado | 3 |
| :disabled | input:disabled | Elegir cada elemento de entrada inhabilitado | 3 |
| :checked | input:checked | Elegir cada elemento de entrada seleccionado | 3 |
| :not(selector) | :not(p) | Elegir cada elemento que no sea un elemento p | 3 |
| ::selection | ::selection | Coincide con la parte seleccionada o resaltada del elemento | 3 |
| :out-of-range | :out-of-range | Coincide con elementos input donde el valor está fuera de un rango especificado | 3 |
| :in-range | :in-range | Coincide con elementos input donde el valor está en un rango especificado | 3 |
| :read-write | :read-write | Se utiliza para coincidir con elementos que son ambos legibles y editables | 3 |
| :read-only | :read-only | Se utiliza para coincidir con elementos que han establecido la propiedad "readonly" (solo lectura) | 3 |
| :optional | :optional | Se utiliza para coincidir con elementos de entrada opcionales | 3 |
| :required | :required | Se utiliza para coincidir con elementos que han establecido la propiedad "required" | 3 |
| :valid | :valid | Se utiliza para coincidir con elementos de entrada de valores legales | 3 |
| :invalid | :invalid | Se utiliza para coincidir con elementos de entrada de valores ilegales | 3 |