.

UNIVERSIDAD NACIONAL DE CHIMBORAZO

FACULDAD CIENCIAS DE LA EDUCACIÓN

NOMBRE DE LA CARRERA:
LICENCIATURA EN PEDAGOGÍA DE LAS CIENCIAS EXPERIMENTALES:
INFORMATICA
NOMBRE DEL ESTUDIANTE:
Milton Alejandro Quishpe Lozada
CURSO:
6”A”
TAREA:
N° ¿
FECHA:
11/1/2023
Universidad Nacional de Chimborazo

Pseudo-Elementos
Los pseudo-elementos en CSS son un mecanismo para acceder a partes del HTML que
no tienen asociado un nodo en el DOM. Por ejemplo, está claro que una «parte de nuestro
documento» podría ser «la primera línea de un párrafo», «la primera letra de un párrafo»
o «la selección que ha hecho el usuario». Pero los pseudo-elementos también son una
forma de crear contenido antes o después de un elemento de nuestro DOM a través de
CSS.
Los pseudo-elementos disponibles en CSS3 son:
• : before: sirve para añadir contenido antes de un elemento
• : after: sirve para añadir contenido después de un elemento
• : first-letter: selecciona la primera letra de un elemento de tipo «bloque» (es decir,
los que tienen como display valores tipo block, inline-block, table-cell, etc)
• : first-line: selecciona la primera línea de un elemento que, como en el caso
anterior, sea de tipo «bloque»
• : selection: hace referencia a las partes del documento que el visitante haya
seleccionado
Como puedes ver, los pseudo-elementos se caracterizan por empezar con un par de dos
puntos (::). La forma de usarlos es extremadamente sencilla.
Universidad Nacional de Chimborazo

Lista de pseudoelementos
• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop
• ::placeholder Experimental
• ::marker Experimental
• ::spelling-error Experimental
• ::grammar-error (en-US) Experimental

Pseudo-classes
Las pseudoclases se utilizan para hacer referencia a elementos HTML que tengan un
cierto comportamiento concreto. Volvamos a recordar el esquema general de sintaxis de
CSS, donde ahora añadiremos las pseudoclases, que se definen añadiendo dos
puntos antes del nombre de la pseudoclase concreta, de la siguiente forma.

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica
un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo
cuando el usuario haga hover sobre el elemento especificado por el selector.

Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un

elemento no sólo en relación con el contenido del árbol de documento, sino también en
relación a factores externos como el historial del navegador (:visited, por ejemplo), el
estado de su contenido (como :checked en algunos elementos de formulario), o la
posición del ratón (como :hover que permite saber si el ratón está encima de un elemento
o no).
Universidad Nacional de Chimborazo

índice de las pseudo-clases estándar

• :active
• :checked
• :default
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :focus
• :hover
• :indeterminate
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
Universidad Nacional de Chimborazo

• :only-of-type
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :right
• :root
• :scope (en-US)
• :target
• :valid
• :visited