Selectores en CSS3: pseudo-clases de estado

CSS

Selectores en CSS3

En CSS hay pseudo-clases que pueden hacer referencia al estado especial de un elemento. Uno muy común es cuando se pasa el ratón por encima. CSS3 incorpora nuevas pseudo-clases de estado más complejas.

Selector target

Con este selector los elementos que sean objetivo de una url tendrán un estilo. Por ejemplo, cuando se clica en un link y su href apunta al id de un elemento, al pulsar ese vínculo cambiará el diseño del elemento. Por ejemplo, tengo un título y enlace apunta a él.

XHTML
1
2
3
<h1 id="titulo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at cursus turpis. </h1>
 
<a href="#titulo">Señalar titulo</a>

Si le aplico unas reglas css con la pseudo-clase target, en este caso que las letras sean rojas, cuando clique el enlace el título debería verse en rojo.

CSS
1
2
3
h1:target{
  color:red;
}

Selectores enabled y disabled

Los inputs pueden desactivarse y activarse y cuando esto sucede se pueden seleccionar para aplicarle un estilo.

XHTML
1
2
<input type="text" disabled />
<input type="text" />

Para este ejemplo, los inputs disabled serán casi transparentes y los que estén activos tendrán un borde verde.

CSS
1
2
3
4
5
6
7
input:disabled{
opacity:0.2;
}
 
input:enabled{
border: 1px solid green;
}

Selector checked

Esto selector está enfocado para los inputs checkbox y radio e incluso los tipo option que se usan en los select. Cuando están checkeados/seleccionados se les puede aplicar un diseño.

XHTML
1
2
3
4
5
6
7
8
<input type="checkbox"/> Checkbox
<br />
<input type="radio" /> Radio
<br />
<select>
<option>Prueba 1</option>    
   <option>Prueba 2</option>    
</select>

Los checkbox y radio con tick se desplazarán a la derecha mientras que la opción seleccionada en el select aumentará su tamaño.

CSS
1
2
3
4
5
6
7
input:checked{
margin-left: 15px;
}
 
option:checked{
width: 100px;
}

Selector not

Este no sería de estado, pero está bien mencionarlo. Permite aplicar un estilo a elementos que no representen lo que haya dentro del :not. Es decir, aplicar estilo a todos los elementos que no sean… Sólo acepta un selector simple, por ejemplo

XHTML
1
2
<p>Donec pellentesque malesuada lacus sed gravida.</p>
<p class="diferente">Duis mattis vulputate ligula quis auctor.</p>

Pondré de color verde aquellos párrafos que no tengan la clase «diferente».

CSS
1
2
3
p:not(.diferente){
color: green;
}

Y hasta aquí las pseudo-clases de estado, espero que os resulten útiles. A seguir picando 🙂