Las pseudo-clases permiten definir el estado especial de un elemento. En este post hablaré de pseudo-clases basados en atributos, interacción del usuario y de control de formulario. Todavía quedarían por tratar las pseudo-clases estructurales que las dejaré para otro post.
:enabled
Permite seleccionar un elemento que esté activo. Por defecto los elementos ya tienen enabled.
CSS
|
1 2 3 |
input:enabled { background:#FF0; } |
HTML
|
1 |
<input type="text" /> |
:disabled
Selecciona los elementos que no estén activos.
|
1 2 3 |
input:disabled { border-color:red; } |
|
1 |
<input type="text" disabled/> |
:checked
Orientado a los checkbox o radio buttons que estén seleccionados o con el tick.
|
1 2 3 |
input:checked{ outline:#0F0 solid; } |
|
1 |
<input type="checkbox" checked /> |
:indeterminate
Se refiere aquellos checkbox que no están ni seleccionados ni deseleccionados. Esta propiedad es cambiada via javascript.
|
1 2 3 |
input:indeterminate{ outline:#06F solid } |
|
1 |
<input id="prueba" type="checkbox"/> |
El código javascript iría al final del <body>.
|
1 2 3 |
<script type="text/javascript"> document.getElementById("prueba").indeterminate = true; </script> |
:target
Este selector se refiere al elemento actualmente objetivo de un ancla. Un ancla es un link que se refiere a un elemento concreto de la página usando el carácter “#”. Por ejemplo <a href=”#contenido”> Saltar al contenido</a>. Cuando se clique en ese vínculo, saltará al elemento con el id contenido.
Esto cambia la URL de la barra de dirección añadiendo #contenido. El selector :target haría referencia a #contenido, pero si clicas en otra ancla dirigida a #titulo, el selector :target pasaría hacer referencia a #titulo.
|
1 2 3 4 5 6 7 8 |
p:target{ color:blue; } h4:target { color:blue; } |
|
1 2 3 4 5 |
<a href="#titulo">Ir a título</a> <a href="#contenido">Ir a contenido</a> <h4 id="titulo">Esto es un título</h4> <p id="contenido">Esto es el contenido</p> |
:default
Apunta al elemento por defecto en un formulario. Por ejemplo, en el formulario la acción por defecto es submit, por tanto el botón submit se vería afectado por la pseudo-clase.
|
1 2 3 4 |
:default{ background:#06F; color:#FFF; } |
|
1 2 3 4 5 6 7 |
<form> <label>Nombre:</label> <input type="text" id="nombre"> <a href="#">Cancelar</a> <button type="reset">Reset</button> <button type="submit">Enviar</button> </form> |
:valid
Se aplica a elementos que son válidos basados en el type o pattern. Esto se trató en el tutorial de validación de formularios en HTML5.
:invalid
Se aplica a elementos requeridos que están vacíos o que no cumplen ciertos requisitos de los atributos type o pattern.
:in-range
Selecciona aquellos elementos con una limitación de rango y su valor está dentro de esas limitaciones.
|
1 2 3 |
input:in-range { background:green; } |
|
1 |
<input type="number" min="5" max="10"> |
:out-of-range
Lo contrario a in-range, su valor no está dentro del rango establecido.
|
1 2 3 |
input:out-of-range { background:red; } |
|
1 |
<input type="number" min="5" max="10"> |
:required
Aplicado a controles de formulario que tienen el atributo required. Puedes ver más en el tutorial de validación de formulario en HTML5.
:optional
Son aquellos controles del formulario que no tienen el atributo required.
:read-only
Hace referencia aquellos elementos cuyos contenidos son imposibles de alterar por el usuario. En mozilla hay que usar –moz.
|
1 2 3 4 5 6 7 |
input:-moz-read-only{ background: #0FF; } input:read-only{ background:#0FF; } |
|
1 |
<input class="prueba" type="text" value="solo lectura" readonly/> |
:read-write
Se aplica a todos los elementos cuyos contenidos pueden ser alterados por el usuario. También hay que emplear –moz en caso de usar Firefox.
|
1 2 3 |
input:read-write{ border:#00F 1px solid; } |
|
1 |
<input type="text" /> |
Y hasta aquí el post de hoy. El siguiente post de CSS ira destinado a las pseudo-clases estructurales. Espero que hayáis aprendido mucho. Saludos 🙂