Que son las Pseudo Clases y cuales existen en CSS 3

Demo Github

El lenguaje de diseño CSS cuenta con muchas utilidades que lo hace un lenguaje muy potente para crear páginas y aplicaciones web, aplicaciones móviles híbridas y aplicaciones o entornos que cuenten con soporte para CSS, entre estas utilidades existen las Pseudo Clases que nos ayudan a trabajar con elementos HTML y en este Post hablaremos sobre ellas.

Antes de continuar con este Post te invito a tomar el curso CSS 3 desde 0 completamente Gratis, en donde aprenderás en detalle a usar las propiedades, módulos, etc. de CSS 3 que te permitirán darle un mejor diseño y diferentes características visuales a una Página HTML 5:

Bien continuemos con el Post: Que son las Pseudo Clases y cuales existen en CSS 3.

Que son las Pseudo Clases de CSS 3 ?

Las Pseudo Clases de CSS 3 son un tipo de selectores de estados especiales de un elemento, por ejemplo podemos seleccionar el estado de un enlace (link) cuando el mouse pasa por encima de el, escribiendo a:hover, en el código CSS sería así:

En el código anterior a es el elemento y :hover es la Pseudo Clase.

En HTML 5, los elementos cuentan con un particular atributo o estado que puede ser aprovechado por las Pseudo Clases de CSS 3. 

Las Pseudo Clases que existen en CSS 3

Al inicio de este Post he colocado una Demo en donde puedes ver como funcionan las Pseudo Clases que existen en CSS 3. Existen varias Pseudo Clases de CSS 3 y a continuación te compartiré una lista en donde explico que hace cada una de ellas:

:active

Selecciona el link o enlace activo. Por ejemplo a:active

:checked

Selecciona los elementos de formulario <input> que han sido marcados. Por ejemplo input:checked

:disabled

Selecciona los elementos de formulario <input> que han sido deshabilitados. Por ejemplo input:disabled

:empty

Selecciona los elementos que no tiene hijos. Por ejemplo p:empty

:enabled

Selecciona los elementos de formulario <input> que han sido habilitados. Por ejemplo input:enabled

:first-child

Selecciona los elementos que son el primer hijo de su padre. Por ejemplo p:first-child

:first-of-type

Selecciona cada elemento que es el primer elemento de su padre. Por ejemplo p:first-of-type

:focus

Selecciona el elemento que tiene foco. Por ejemplo input:focus

:hover

Selecciona los elementos o enlaces (links) al pasar el mouse. Por ejemplo a:hover

:in-range

Selecciona elementos con un valor dentro de un rango específico. Por ejemplo input:in-range

:invalid

Selecciona los elementos con un valor no válido. Por ejemplo input:invalid

:lang(language)

Selecciona cada elemento con un valor de atributo lang y un idioma específico. Por ejemplo p:lang(fr), en este caso el idioma francés.

:last-child

Selecciona cada elemento que es el último hijo de su padre. Por ejemplo p:last-child

:last-of-type

Selecciona cada elemento que es el último elemento de su padre. Por ejemplo p:last-of-type

:link

Selecciona los enlaces que no han sido visitados. Por ejemplo a:link

:not(selector)

Selecciona cada elemento que no es un elemento. Por ejemplo :not(p)

:nth-child(n)

Selecciona cada elemento que es el segundo hijo de su padre. Por ejemplo p:nth-child(2)

:nth-last-child(n)

Selecciona cada elemento que es el segundo hijo de su padre, contactando desde el último hijo. Por ejemplo p:nth-last-child(2)

:nth-last-of-type(n)

Selecciona cada elemento que es el segundo elemento de su padre, contactando desde el último hijo. Por ejemplo p:nth-last-of-type(2)

:nth-of-type(n)

Selecciona cada elemento que es el segundo elemento de su padre. Por ejemplo p:nth-of-type

:only-child

Selecciona cada elemento que es el único hijo de su padre. Por ejemplo p:only-child

:only-of-type

Selecciona cada elemento que es el único elemento de su padre. Por ejemplo p:only-of-type

:optional

Selecciona los elementos que no tienen el atributo required. Por ejemplo input:optional

:out-of-range

Selecciona los elementos con un valor fuera de un rango especificado. Por ejemplo input:out-of-range

:read-only

Selecciona los elementos que tienen el atributo readonly. Por ejemplo input:read-only

:read-write

Selecciona los elementos que no tienen el atributo readonly. Por ejemplo input:read-write

:required

Selecciona los elementos que tienen el atributo required. Por ejemplo input:required

:root

Selecciona el elemento raíz del documento, similar a seleccionar el elemento body. Por ejemplo :root

:target

Selecciona un elemento de tipo enlace ancla que este activo. Por ejemplo #servicios:target

:valid

Selecciona los elementos con un valor válido. Por ejemplo input:valid

:visited

Selecciona los enlaces visitados. Por ejemplo a:visited

Conclusión

Al inicio de este Post he colocado una Demo en donde puedes ver como funcionan las Pseudo Clases que existen en CSS 3. Puedes hacer uso de las Pseudo Clases de CSS 3 que necesites o según tus necesidades, conforme practiques y hagas uso constante de ellas, lograras dominarlas y comprenderlas mejor.

Nota(s)

• Al inicio de este Post he colocado una Demo en donde puedes ver como funcionan las Pseudo Clases que existen en CSS 3. 
• Las Pseudo Clases mencionadas en este Post pueden ser eliminadas, modificadas o continuar, esto no depende de mi, si no de los Desarrolladores u organizaciones que le dan soporte a CSS.
• No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.