w3ii 'referencia CSS se analiza regularmente con todos los principales navegadores.
Los selectores CSS
En CSS, los selectores son patrones usados para seleccionar el element(s) que desea estilo.
El "CSS" columna indica en qué versión de CSS la propiedad se define (CSS1, CSS2, or CSS3) .
| Selector | Ejemplo | Descripción ejemplo | CSS |
|---|---|---|---|
| . class | .intro | Selecciona todos los elementos con class="intro" | 1 |
| # id | #firstname | Selecciona el elemento con id="firstname" | 1 |
| * | * | Selecciona todos los elementos | 2 |
| element | p | Selecciona todos los <p> elementos | 1 |
| element,element | div, p | Selecciona todos los <div> elementos y todos los <p> elementos | 1 |
| element element | div p | Selecciona todos los <p> elementos dentro de <div> elementos | 1 |
| element > element | div > p | Selecciona todos los <p> elementos en los que el padre es un <div> elemento | 2 |
| element + element | div + p | Selecciona todos los <p> elementos que se colocan inmediatamente después de <div> elementos | 2 |
| element1 ~ element2 | p ~ ul | Selecciona todos los <ul> elemento que están precedidos por un <p> elemento | 3 |
| [ attribute ] | [target] | Selecciona todos los elementos con un atributo de destino | 2 |
| [ attribute = value ] | [target=_blank] | Selecciona todos los elementos con target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | Selecciona todos los elementos con un atributo de título que contienen la palabra "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | Selecciona todos los elementos con un valor de atributo lang comenzando con "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | Selecciona todos los <a> elemento cuyo href valor del atributo comienza con "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | Selecciona todos los <a> elemento cuyo valor del atributo href termina con ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | Selecciona todos los <a> elemento cuyo href valor de atributo contiene la subcadena "w3ii" | 3 |
| :active | a:active | Se selecciona el vínculo activo | 1 |
| ::after | p::after | Insertar algo después de que el contenido de cada <p> elemento | 2 |
| ::before | p::before | Insertar algo antes de que el contenido de cada <p> elemento | 2 |
| :checked | input:checked | Selecciona cada comprobado <input> elemento | 3 |
| :disabled | input:disabled | Selecciona todas las personas con discapacidad <input> elemento | 3 |
| :empty | p:empty | Selecciona todos los <p> elemento que no tiene hijos (including text nodes) | 3 |
| :enabled | input:enabled | Selecciona cada habilitado <input> elemento | 3 |
| :first-child | p:first-child | Selecciona todos los <p> elemento que es el primer hijo de su padre | 2 |
| ::first-letter | p::first-letter | Selecciona la primera letra de cada <p> elemento | 1 |
| ::first-line | p::first-line | Selecciona la primera línea de cada <p> elemento | 1 |
| :first-of-type | p:first-of-type | Selecciona todos los <p> elemento que es el primer <p> elemento de su padre | 3 |
| :focus | input:focus | Selecciona el elemento de entrada que tiene el foco | 2 |
| :hover | a:hover | Selecciona el ratón por encima enlaces | 1 |
| :in-range | input:in-range | Selecciona los elementos de entrada con un valor dentro de un rango especificado | 3 |
| :invalid | input:invalid | Selecciona todos los elementos de entrada con un valor no válido | 3 |
| :lang( language ) | p:lang(it) | Selecciona todos los <p> elemento con un lang atributo igual a "it" (Italian) | 2 |
| :last-child | p:last-child | Selecciona todos los <p> elemento que es el último hijo de su padre | 3 |
| :last-of-type | p:last-of-type | Selecciona todos los <p> elemento que es el último <p> elemento de su padre | 3 |
| :link | a:link | Selecciona todos los enlaces no visitados | 1 |
| :not( selector ) | :not(p) | Selecciona cada elemento que no es un <p> elemento | 3 |
| :nth-child( n ) | p:nth-child(2) | Selecciona todos los <p> elemento que es el segundo hijo de su padre | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | Selecciona todos los <p> elemento que es el segundo hijo de su padre, a contar desde el último hijo | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | Selecciona todos los <p> elemento que es el segundo <p> elemento de su padre, a contar desde el último hijo | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | Selecciona todos los <p> elemento que es el segundo <p> elemento de su padre | 3 |
| :only-of-type | p:only-of-type | Selecciona todos los <p> elemento que es la única <p> elemento de su padre | 3 |
| :only-child | p:only-child | Selecciona todos los <p> elemento que es el único hijo de su padre | 3 |
| :optional | input:optional | Selecciona los elementos de entrada sin "required" atributo | 3 |
| :out-of-range | input:out-of-range | Selecciona los elementos de entrada con un valor fuera de un rango especificado | 3 |
| :read-only | input:read-only | Selecciona los elementos de entrada con el "readonly" atributo especifica | 3 |
| :read-write | input:read-write | Selecciona los elementos de entrada con el "readonly" NO atributo especificado | 3 |
| :required | input:required | Selecciona los elementos de entrada con la "required" atributo especificado | 3 |
| :root | :root | Selecciona elemento raíz del documento | 3 |
| ::selection | ::selection | Selecciona la parte de un elemento que es seleccionado por un usuario | |
| :target | #news:target | Selecciona el elemento #news activa actual (hecho clic en un enlace que contiene ese nombre de ancla) | 3 |
| :valid | input:valid | Selecciona todos los elementos de entrada con un valor válido | 3 |
| :visited | a:visited | Selecciona todos los enlaces visitados | 1 |