2.8 KiB
| title | localeTitle |
|---|---|
| Pseudo | Seudo |
Pseudo selectores
Los pseudo selectores proporcionan una forma de apuntar a los elementos utilizando pseudo clases o pseudo elementos.
Pseudo Clases Estructurales
Las clases de pseudoestructuras estructurales ofrecen una forma de orientar los elementos en función de su posición.
Clase | Descripción --------- | ------------ :root | Raíz del documento. En el contexto de los documentos HTML, esta sería una etiqueta html en la parte superior. Podría significar diferentes elementos en otros documentos como XML o SVG. :only-child | Un elemento que es el único hijo de su elemento padre. :first-child | Primer hijo de un padre. :last-child | Último hijo de un elemento padre. :nth-child(n) | n-th hijo de su padre. :nth-last-child(n) | n-th niño del último niño. El reverso de :nth-child . :only-of-type | El único elemento del tipo dentro de sus hermanos con otros tipos. :first-of-type | El primer elemento del tipo entre sus hermanos. :last-of-type | El último elemento del tipo entre sus hermanos. :nth-of-type(n) | N-th hermano del mismo tipo. :nth-last-of-type(n) | N-th hermano del mismo tipo del último. El reverso de :nth-of-type . :empty | Un elemento sin elementos hijos.
Use State Pseudo Classes
Las pseudo clases del estado de la interfaz de usuario ofrecen una forma de orientar los elementos según su estado actual.
Clase | Descripción --------- | ------------ :link | Elementos de enlace no visitados. :visited | Un enlace visitado ya. :hover | Un elemento sobre el que el puntero del ratón está flotando. :active | Un elemento en el que se ha hecho clic en el puntero del mouse, pero aún no se ha liberado. :focus | Un elemento que tiene foco. Importante para la accesibilidad, por ejemplo, al usar la tecla de tab para la navegación. :enabled | Un elemento que está en estado habilitado. :disabled | Un elemento que ha sido deshabilitado. :checked | Una casilla seleccionada o botón de radio.
Pseudo elementos
Los pseudo elementos, por otro lado, son elementos generados dinámicamente o elementos en un lugar especial.
Selector Descripción --------- | ------------ ::first-line | Primera línea de un elemento, generalmente un contenedor o párrafo. ::first-letter | Una letra de un elemento. Ampliamente utilizado para el diseño de gorras. ::before | Un elemento dinámico creado con contenido propio antes del elemento real. ::after | Un elemento dinámico creado con contenido propio después del elemento real.
Más información:
Se puede encontrar información adicional en las siguientes referencias.