selectores pseudo ejemplos clases atributos after active css css-selectors pseudo-element

pseudo - selectores css



¿Cuál es la diferencia entre pseudo-clases y pseudo-elementos? (2)

Desde https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Pseudo-clase:

Una pseudo-clase CSS es una palabra clave, precedida por dos puntos (:), agregados al final de los selectores para especificar que desea aplicar un estilo a los elementos seleccionados, y solo cuando están en cierto estado . Por ejemplo, es posible que desee aplicar un estilo a un elemento solo cuando el puntero del mouse lo mueve sobre él, o una casilla de verificación cuando está desactivado o marcado, o un elemento que es el primer elemento secundario de su elemento primario en el árbol DOM.

Ejemplos:

  • :activo
  • :comprobado
  • : nth-child ()
  • :primero
  • :flotar

Pseudo-elementos ::

Los pseudo-elementos son muy parecidos a las pseudo-clases, pero tienen diferencias. Son palabras clave, esta vez precedidas por dos puntos (: :), que se pueden agregar al final de los selectores para seleccionar una parte determinada de un elemento .

Ejemplos:

  • ::después
  • ::antes de
  • ::primera letra
  • ::primera linea
  • ::selección
  • ::fondo

¿Cuál es la diferencia entre div::after {} y div:after {} ? ¿Cuándo tenemos que usar :: over:?

La notación de dos puntos y de un solo colon es distinguir entre pseudo-clases y pseudo-elementos.

¿Cuál es el significado real de la declaración anterior?


Pseudo-clases: se aplica automáticamente por el navegador dependiendo de la posición del elemento o su estado interactivo.

Por ejemplo :

E:hover Coincide con elementos de tipo E cuando el cursor está sobre él.

Pseudo-elementos: aplica estilos al contenido según su posición en la jerarquía de HTML.

Por ejemplo :

E::first-letter Esto aplica un estilo a la primera letra de la primera línea dentro de un elemento de nivel de bloque E.

Asi que ,

La especificación de los selectores de CSS3 prefija los pseudo-elementos con dos puntos en lugar de uno. Entonces, la primera letra se convierte en la primera letra y la primera línea se convierte en la primera línea. IE 8 y versiones anteriores no entienden el prefijo de dos puntos, por lo que necesita usar las versiones de un solo punto para evitar que los estilos se rompan en los navegadores más antiguos.