Notas sobre CSS (2) :las pseudo-clases

Ahora que sabéis lo que son las CSS, en donde escribirlas y como seleccionarlas, vamos a ampliar un poco mas el tema, precisamente, de los selectores, ya que ademas de etiquetas, ids, y clases, disponemos tambien de las pseudoclases

Empezamos por aclarar el concepto. Con lo que sabemos hasta ahora, podemos aplicar estilos a una etiqueta (objeto) por su id, por su posición, por la clase o por la etiqueta que sea, todos ellos razones estáticas. El id de un objeto no cambia tenga foco o no, o sea correcto o no, o hayamos visitado un enlace o no…Las pseudoclases, nos permiten actuar sobre objetos de una forma mas precisa, o en funcion de un evento que suceda. Si hacemos un resumen de las pseudoclases, estará mas claro.

Las antiguas pseudoclases

Hasta ahora, las conocíamos para la etiqueta a, y eran:

  • :link – Se aplica a todos los enlaces que no han sido visitados por el usuario
  • :visited – Se aplica a los enlaces visitados al menos una vez por el usuario

Para cualquier elemento, teníamos

  • :hover – Cuando el usuario pasa el raton por encima del objeto
  • :active – Cuando el usuario pulsa el raton encima de un objeto (desde que pulsa el raton hasta que lo suelta)
  • :focus – Cuando el elemento esta seleccionado, (tiene foco), se aplica habitualmente a los campos de entrada (input)

html-pseudoclasesEn este ejemplo, el enlace parece azul como le dice la linea 8, si colocamos el cursor encima, veréis crecer las fuentes hasta 30px, que es lo que le dice la linea 14, y si hacéis clic, veréis pasar las letras al monstruoso tamaño de 60px, segundos antes a que os redirija a google.com, cuando volváis a la pagina, el enlace aparecerá gris, como le dice la linea 11

Los pseudo-elementos

Los pseudo-elementos, son elementos que realmente no existen, y son creados por el navegador; tenemos los siguientes:

  • :first-line – selecciona la primera linea de un elemento; por ejemplo
     p:first-line{ ... }

    selecciona la primera linea de un parrafo

  • :first-letter – Selecciona la primera letra de un elemento. Por ejemplo esto:
    p:first-letter { text-transform: uppercase; }

    nos garantizaría que todos nuestros párrafos empiezan con mayúsculas

  • ::before y ::after los podemos utilizar, junto con “content” para añadir algo delante o detrás de un elemento

Podéis ver un ejemplo de las posibilidades de los pseudo elementos.

Las nuevas pseudo-clases de CSS3

Y ya hemos llegado a lo mas nuevo. Llegados a este punto, os dejo un enlace a una página que comprueba si el navegador que estáis utilizando soporta las nuevas pseudo clases, esta aquí, y de paso, veréis todas las que hay, aunque nosotros solo revisemos algunas.

  • :checked -Cuando un elemento (checkbox, radio) esta marcado
  • :indeterminate – Inputs en dicho estado
  • :default – el elemento tiene el valor por default
  • :valid – El elemento ha sido validado
  • :invalid – El elemento ha dado error en la validación
  • :in-range – los valores están dentro de rango
  • :out-of-range – Los valores están fuera de rango
  • :required – El dato es obligatorio
  • :optional – El dato es opcional
  • :read-only – El campo es de solo lectura
  • :read-write – El campo es modificable
  • :disabled – El campo esta desactivado

La utilización de estas pseudo-clases nos permiten aplicar estilos según el estado en que se encuentre el componente, por ejemplo, aplicar tres colores al borde de un “input” según  sea correcto, sea obligatorio, o sea erróneo seria algo como:pseudo_clases_html5

A continuación, vamos a presentar  un pequeño formulario en donde practicar todas esas cosas. Al final tienes un enlace a jsfiddle con todo el código, pero hasta entonces, vamos a irlo desmenuzando.

Primero, el titulo; se nos ha ocurrido poner una ligera sombra a las letras; es un efecto con el que se ha de tener mucho cuidado, porque corremos el riesgo de hacer ilegible nuestro escrito, pero…html5_sombras_texto

 

En el HTML, hemos indicado el titulo entre “h1”, por lo que en la hoja de estilos le hemos dado, a la etiqueta h1, una sombra de texto, en esta web os pueden ayudar a calcular los valores de color, distancia y angulo, que es lo que hemos indicado en “text-shadow”

Luego, el menú, en donde hemos normalizado un poco su presentación. Una forma muy cómoda de crear menús y submenus, es el uso de listas desordenadas. html5_menu_ul

Como hemos ido diciendo, un menú debería estar dentro de un grupo “nav”, por lo que dentro de ese grupo, hemos simulado una lista, que, si fuera menu,
ria tener enlaces… pero para nuestra explicación, no será necesario. Naturalmente, si no hacemos nada, nuestro menú se verá asi:2014-09-13_11h11_12

Y sabemos que no es la imagen deseada, ya que nos gustaría que apareciera en horizontal, sin esos puntitos. Y como eso es un tema de presentación, lo resolvemos con un poco de CSS. Primero entendamos la estructura:

ul es una caja que contiene todos los li que son los que contienen los textos, los enlaces, o lo que deseemos que sea nuestro menú; entonces, para quitarle los puntos, me bastara con decir:

ul {
 list-style: none;
 padding: 0.5em;
 }

Doy estilo a “ul” indicándole “list-style:none” que hará que desaparezcan los puntos, y utilizo un padding, para garantizar algo de espacio alrededor del menú.

La unidad que estoy utilizando (em) equivale al espacio que ocupa una “m” con el tipo de fuente activo. Como podéis imaginar es la mas “responsive” de las medidas, ya que es sensible al tamaño de letra y al tipo de letra.

Si ha desaparecido los puntos, ahora tenemos que hacer que los items del menu aparezcan unos al lado de otros; 2014-09-13_11h27_55

 

y sabemos que son elemento “li”, pues aplicaremos estilos a los “li” que están dentro de “ul”:

ul li {
 float: left;
 width: 6em;
 padding: 0.1em 0.3em;
 border-right-style: inset;
 }

Prestad atención a que estoy definiendo los estilos a nivel de “ul”, eso significa que todos los “ul” que haya en la pagina, recibirán esos estilos, por lo que si pueden haber mas ul, deberíais asignar los estilos, por ejemplo a “nav ul”, ya que dentro de “nav” no tiene porque haber mas “ul”….

El que aparezcan en la misma linea, lo hemos conseguido con un “float:left”, he indicado anchura, para que todos los elementos tengan la misma, con “padding” consigo que haya un poco de espacio alrededor del texto, le indico dos medidas, por lo que utilizara la primera para padding superior e inferior, y la segunda, para padding derecho e izquierdo

Con “border-rigth-style” consigo que me dibuje esa raya vertical entre el menú, ya que lo que hago es dar estilo al borde  derecho de la caja “li”, sin embargo, eso hace que tambien me dibuje ese borde en la ultima entrada de menú, en nuestro ejemplo, los puntos suspensivos, y como supongo que me vais a decir que queda muy feo, os indico como borrarla.

Esa ultima raya es el borde del ultimo “li”, por lo que, como queremos que ese “li” no tenga bordes, podemos decir:

ul li:last-child{
 border:none;
 }

Con lo que al ultimo “li” (last-child) le indico “border:none”.

Solo nos queda crear algún efecto cuando el raton este encima de un “li”, y eso lo haremos con la pseudoclase “hover”:

ul li:hover{
 background-color: #ccc;
 }

Solo hemos cambiado el color del fondo, pero, podríamos haber hecho cualquier cosa, ya que es una estrada de estilo, por lo que podríamos cambiar el tamaño del texto, o su tipo, o su color, o hacer que apareciera una imagen,…cualquier cosa que podamos definir por estilos

En el siguiente artículo continuamos con la explicación de los estilos utilizados para conseguir un formulario tan feo como este:

html5_formulario

 

Allí analizaremos el uso de las pseudoclases, para automatizar estilos

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en CSS, Desarrollo Web, Diseño, Formacion y etiquetada , , . Guarda el enlace permanente.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.