CSS Pseudoclases
Las pseudoclases CSS se utilizan para añadir efectos especiales a algunos selectores.
Sintaxis
Sintaxis de las pseudoclases:
Las clases CSS también pueden usar pseudoclases:
Pseudoclases de ancla
En los navegadores compatibles con CSS, los diferentes estados de un enlace se pueden mostrar de diferentes maneras.
Ejemplo
Pruébelo »
Nota:En la definición CSS, a:hover debe colocarse después de a:link y a:visited para ser válido.
Nota:En la definición CSS, a:active debe colocarse después de a:hover para ser válido.
Nota:Los nombres de las pseudoclases no distinguen entre mayúsculas y minúsculas.
Pseudoclases y clases CSS
Las pseudoclases se pueden usar junto con las clases CSS:
Si el enlace del ejemplo anterior ya ha sido visitado, se mostrará en rojo.
Pseudoclase CSS :first-child
Puede usar la pseudoclase :first-child para seleccionar el primer hijo de un elemento padre.
Nota:En versiones anteriores a IE8 debe declararse<!DOCTYPE>, de modo que :first-child sea válido.
Coincide con el primer elemento <p>
En el siguiente ejemplo, el selector coincide con los elementos <p> que son el primer hijo de cualquier elemento:
Coincide con el primer elemento <i> de todos los elementos <p>
En el siguiente ejemplo, el selector coincide con el primer elemento <i> de todos los elementos <p>:
Coincide con todos los elementos <i> de todos los elementos <p> que son el primer hijo
En el siguiente ejemplo, el selector coincide con todos los elementos <i> dentro de los elementos <p> que son el primer hijo de un elemento:
CSS - Pseudoclase :lang
La pseudoclase :lang le permite definir reglas especiales para diferentes idiomas.
Nota:IE8 debe declarar<!DOCTYPE>para poder admitir la pseudoclase :lang.
En el siguiente ejemplo, la clase :lang define el tipo de comillas para los elementos q con valor de atributo "no":
Más ejemplos
Agregar diferentes estilos a los hipervínculos
Este ejemplo demuestra cómo agregar otros estilos a los hipervínculos.
Usando :focus
Este ejemplo demuestra cómo usar la pseudoclase :focus.
Todas las pseudoclases/elementos CSS
| Selector | Ejemplo | Descripción del ejemplo |
|---|---|---|
| :checked | input:checked | Selecciona todos los elementos de formulario seleccionados |
| :disabled | input:disabled | Selecciona todos los elementos de formulario deshabilitados |
| :empty | p:empty | Selecciona todos los elementos p sin hijos |
| :enabled | input:enabled | Selecciona todos los elementos de formulario habilitados |
| :first-of-type | p:first-of-type | Selecciona cada elemento p que es el primer elemento p de su padre |
| :in-range | input:in-range | Selecciona elementos cuyo valor está dentro de un rango especificado |
| :invalid | input:invalid | Selecciona todos los elementos no válidos |
| :last-child | p:last-child | Selecciona el último hijo de todos los elementos p |
| :last-of-type | p:last-of-type | Selecciona cada elemento p que es el último elemento p de su elemento padre |
| :not(selector) | :not(p) | Selecciona todos los elementos excepto p |
| :nth-child(n) | p:nth-child(2) | Selecciona el segundo hijo del padre de todos los elementos p |
| :nth-last-child(n) | p:nth-last-child(2) | Selecciona el penúltimo hijo de todos los elementos p |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona todos los elementos p que son el segundo hijo de tipo p empezando desde el final |
| :nth-of-type(n) | p:nth-of-type(2) | Selecciona todos los elementos p que son el segundo hijo de tipo p |
| :only-of-type | p:only-of-type | Selecciona todos los elementos que tienen un solo hijo de tipo p |
| :only-child | p:only-child | Selecciona todos los elementos p que tienen un solo hijo |
| :optional | input:optional | Selecciona los elementos sin el atributo 'required' |
| :out-of-range | input:out-of-range | Selecciona los elementos con un valor fuera del rango especificado |
| :read-only | input:read-only | Selecciona los elementos con el atributo de solo lectura |
| :read-write | input:read-write | Selecciona los elementos sin el atributo de solo lectura |
| :required | input:required | Selecciona los elementos que tienen el atributo 'required' especificado |
| :root | root | Selecciona el elemento raíz del documento |
| :target | #news:target | Selecciona el elemento #news actualmente activo (la URL en la que se hace clic contiene el nombre del ancla) |
| :valid | input:valid | Selecciona todos los elementos con valores válidos |
| :link | a:link | Selecciona todos los enlaces no visitados |
| :visited | a:visited | Selecciona todos los enlaces visitados |
| :active | a:active | Selecciona el enlace activo |
| :hover | a:hover | El estado al colocar el ratón sobre un enlace |
| :focus | input:focus | Selecciona el elemento que tiene el foco |
| :first-letter | p:first-letter | Selecciona la primera letra de cada elemento <p> |
| :first-line | p:first-line | Selecciona la primera línea de cada elemento <p> |
| :first-child | p:first-child | El selector coincide con el elemento <p> que es el primer hijo de cualquier elemento |
| :before | p:before | Inserta contenido antes de cada elemento <p> |
| :after | p:after | Inserta contenido después de cada elemento <p> |
| :lang(language) | p:lang(it) | Selecciona los elementos <p> cuyo atributo lang comienza con un valor |