Principales Pseudo-elementos y Pseudo-clases de CSS

Las estructuras HTML asocian características de estilo a los elementos basándose en las etiquetas de los elementos y en su posición relativa (CSS). Las pseudo-clases y los pseudo-elementos permiten hacer referencia a determinados elementos sin basarse en la información contenida en el árbol del documento.

La sintaxis de las pseudo-clases y los pseudo-elementos es la misma: etiqueta:pseudo-elemento_o_pseudo-clase (el nombre de la etiqueta y del pseudo-elemento o de la pseudo-clase separado por dos puntos). 

El pseudo-elemento :first-line:

Este pseudo-elemento permite seleccionar la primera línea de texto de un elemento. pudiendo modificar mediante diferentes estilos de CSS aquella primera linea seleccionada con el pseudo-elemento, por ejemplo al querer cambiar el color de el primera la primera linea de un párrafo con etiqueta <p></p>.

El pseudo-elemento :first-letter:

Este pseudo-elemento seleccionar la primera letra de un texto para moder modificarla con diferentes estilos CSS, tener en cuenta que este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.

Los pseudo-elemento :before y :after:

Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento, por ejemplo:

Las pseudo-clases :first-child:
La pseudo-clase :first-child hace referencia al primer elemento de un tipo contenido dentro de otro. El ejemplo siguiente muestra cómo identificar al primer párrafo dentro de una división sin necesidad de asignar ninguna clase al párrafo.

Las pseudo-clases :link y :visited:

La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario, pudiendo modificar con un color para distinguir de los que ya visitamos anteriormente. 

La pseudo-clase :visited se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.

Las pseudo-clases :hover :active :focus:

Las pseudo-clases :hover, :active y :focus permiten al diseñador web variar los estilos de un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y :visitedque sólo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a cualquier elemento.

• :hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.
• :active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.
• :focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos <input> de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.