Selectores CSS3

Los contenedores vacíos aparecen de color azul.

Nombre:

Apellidos:

Localidad:

Varón.

Mujer.

Suscribirse.

Cambio de color

Selecciona un elemento y este cambiará de color

elemento 1

otro elemento.

En el primer bloque el cuadro azul es un "div" vacío y la línea amarilla un párrafo vacío, detectados mediante la pseudoclase ":empty". En el segundo cuadro los elementos del formulario tienen distinto aspecto que los normales al aplicarles las pseudoclases ":enabled", ":disabled", y ":checked" (esta última sólo la verás en Opera). Todos los elementos de esta página tienen distinto aspecto al ser seleccionados, al haber aplicado el selector "::selection".

Código CSS de las cajas:

#cont1, #cont2, #cont3 {  
        width: 300px; height: 300px; margin: 10px; padding: 5px;  
        border: 4px double maroon; float: left; }
#capa1, #capa2 { width: 200px; height: 100px; border: 1px solid red; margin: 10px; }
p { min-width: 50px; min-height: 15px; }
div:empty{ background-color: blue; }
p:empty { background-color: yellow; }
input[type="text"]:enabled { color: yellow; background-color: navy; font: bold 0.9em arial; }
input[type="text"]:disabled { color: navy; background-color: yellow; font: bold 0.9 arial; }
input:checked { background-color: lime; color: red; font-weight: bold; }
::selection { background-color: aqua; color: red; }
::-moz-selection { background-color: aqua; color: red; }

Código HTML de las cajas

<div id="cont1">
<div id="capa1"></div>
<div id="capa2">
Los contenedores vacíos aparecen de color azul.
<p></p>
</div>
</div>

<div id="cont2">
<form action="#">
<p>Nombre: 
   <input type="text" placeholder="mi-nombre" /></p>
<p>Apellidos: <input type="text" placeholder="mi-apellido" /></p>
<p>Localidad: <input type="text" placeholder="mi-ciudad" disabled="disabled" /></p>
<p><input type="radio" name="sexo" value="varón"/> Varón.</p>
<p><input type="radio" name="sexo" value="mujer"/> Mujer.</p>
<p><input type="checkbox" name="aceptar" value="SI" /> Suscribirse.</p>
</form>
</div>
<div id="cont3">
<h1>Cambio de color</h1>
<p>Selecciona un elemento 
y este cambiará de color</p>
<p>elemento 1</p>
<h4>otro elemento.</h4>
</div>