Unidad 8. Básico: CSS. Pseudoclases y pseudoelementos

Pseudoclases

Las pseudoclases nos permiten referirnos a elementos según su estado. Para indicarlas en la hoja de estilo, se escriben detrás del selector, separadas por dos puntos. Por ejemplo img:hover.

En cuanto a los enlaces, tenemos dos pseudoclases específicas:

• a:link (o solo :link). Se refiere sólo a los enlaces que aún no han sido visitados por el usuario.
• a:visited (o solo :visited). Se refiere sólo a los enlaces que ya han sido visitados por el usuario.

Cualquier elemento puede variar en función de dónde se encuentra el cursor del ratón, con las llamadas pseudoclases dinámicas.

• :hover. Define el estilo de un elemento cuando el cursor está sobre él.
• :active. Define el estilo del elemento cuando se hace clic sobre él y se mantiene pulsado el ratón. Nota: IE sólo lo reconoce si se aplica sobre enlaces.
• :focus. Define el estilo del elemento cuando tiene el foco. Sólo se puede aplicar a elementos que permiten la entrada de datos, como los campos de un formulario, y enlaces.
• :first-child. Define el estilo del primer elemento encontrado de un tipo. Por ejemplo, div#texto p:first-child afecta sólo al primer párrafo que haya dentro de la capa texto.

  a { 
      border: black 5px solid;
      padding:5px;
      }
  a:hover {
      background-color:#CCCCCC;
      }  
  a:active { 
      border-color: red;
      }

Podemos utilizar las pseudoclases como cualquier otro selector, por ejemplo para referirnos a elementos anidados, por ejemplo div.enlaces:hover a {color: red;} mostrará con texto rojo los enlaces contenidos en una división con la clase enlaces, cuando el cursor. se ponga sobre ese div.

Pseudoelementos

Los pseudoelementos son elementos de una página, a los cuales no podemos referirnos como elementos normales, porque no están contenidos en una etiqueta específica.

• :first-line. Establece el estilo para la primera línea de un elemento.
• :first-letter. Establece el estilo para la primera letra de un elemento.

   p:first-line { 
      color: blue;
      }
  p:first-child {
      color: red;
      }  
  p:first-letter { 
      font-size: 200%;
      color: green;
      }

 Cursos Informática Gratuitos