Pseudoclases en CSS

Hola a todos, hoy os voy a explicar como funcionan la pseudoclases en CSS.

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

Recuerda que en las pseudoclases, se coloca dos puntos entre el selector y la pseudoclase.

Hover

Aplica un estilo cuando estamos encima de ese elemento con el cursor.

Active

Aplica un estilo cuando el elemento esta siendo activado, es decir, que el usuario esta haciendo click sobre el mismo. Se suele usar para enlaces y botones.

Focus

Aplica un estilo cuando un elemento tiene el foco, es decir, que el usuario lo esta usando. Muy común para inputs.

Visited

Aplica un estilo cuando un enlace ha sido ya visitado por el usuario. Muy común para los enlaces.

Link

Aplica un estilo cuando un enlace aun no ha sido visitado por el usuario. Muy común para los enlaces.

Checked

Aplica un estilo cuando un input radio o checkbox esta seleccionado.

Disabled

Aplica un estilo cuando un input esta deshabilitado.

Valid e invalid

Valid aplica un estilo cuando un input esta validado.

Invalid aplica un estilo cuando un input esta invalidado.

First-child

Aplica un estilo cuando al primero elemento entre un grupo de elementos hermanos.

Last-child

Aplica un estilo cuando al último elemento entre un grupo de elementos hermanos.

First-of-type

Aplica un estilo al primer elemento de su tipo entre un grupo de elementos hermanos.

Last-of-type

Aplica un estilo al último elemento de su tipo entre un grupo de elementos hermanos.

Nth-child

Aplica un estilo a uno o más elementos en función de su posición entre un grupo de hermanos. Se le pasa un parámetro que seria la posición o una formula, si que quiere que afecte a varios elementos el truco es remplazar n por 0,1,2,3,etc para saber que elementos afectaría. Algunos ejemplos:

• 7: séptimo elemento.
• odd: elementos impares. Es lo mismo que 2n + 1.
• even: elementos pares. Es lo mismo que 2n.
• 3n + 1:  primer elemento y sumando 3 elementos, es decir, 1,4,7,10, etc.
• -n + 3: primeros 3 elementos.

Usa el siguiente ejemplo para probar:

Nth-last-child

Aplica un estilo a uno o más elementos en función de su posición entre un grupo de hermanos empezando desde el final. Se le pasa un parámetro que seria la posición o una formula, si que quiere que afecte a varios elementos el truco es remplazar n por 0,1,2,3,etc para saber que elementos afectaría. Algunos ejemplos:

• 7: séptimo elemento desde el final.
• odd: elementos impares empezando desde el final. Es lo mismo que 2n + 1.
• even: elementos pares empezando desde el final. Es lo mismo que 2n.
• 3n + 1:  ultimo elemento y sumando 3 elementos, es decir, 11, 8, 5, 2, etc.
• -n + 3: últimos 3 elementos.

Usa el siguiente ejemplo para probar:

Nth-of-type

Aplica un estilo a uno o más elementos en función de su posición entre un grupo de hermanos que sean del mismo tipo. Se le pasa un parámetro que seria la posición o una formula, si que quiere que afecte a varios elementos el truco es remplazar n por 0,1,2,3,etc para saber que elementos afectaría. Algunos ejemplos:

• 7: séptimo elemento del tipo especificado.
• odd: elementos impares del tipo especificado. Es lo mismo que 2n + 1.
• even: elementos pares del tipo especificado. Es lo mismo que 2n.
• 3n + 1:  ultimo elemento y sumando 3 elementos, es decir, 11, 8, 5, 2, etc. del tipo especificado
• -n + 3: últimos 3 elementos del tipo especificado.

Usa el siguiente ejemplo para probar:

Nth-last-of-type

Aplica un estilo a uno o más elementos en función de su posición entre un grupo de hermanos que sean del mismo tipo empezando desde el final. Se le pasa un parámetro que seria la posición o una formula, si que quiere que afecte a varios elementos el truco es remplazar n por 0,1,2,3,etc para saber que elementos afectaría. Algunos ejemplos:

• 7: séptimo elemento del tipo especificado empezando desde el final.
• odd: elementos impares del tipo especificado empezando desde el final. Es lo mismo que 2n + 1.
• even: elementos pares del tipo especificado empezando desde el final. Es lo mismo que 2n.
• 3n + 1:  ultimo elemento y sumando 3 elementos, es decir, 11, 8, 5, 2, etc. del tipo especificado empezando desde el final
• -n + 3: últimos 3 elementos del tipo especificado empezando desde el final.

Usa el siguiente ejemplo para probar:

not

Aplica estilos a los elementos que no coinciden con una lista de selectores. Se le pasa un parametro que es una lista de selectores.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.