2. Pseudoclases y pseudoelementos.
A. Selector de descendientes después de :hover
Ejemplo
| a: intervalo de desplazamiento { color: #0f0; } |
describir
Un elemento puede posicionarse mediante un selector siguiendo la pseudoclase :hover, al igual que los selectores descendientes. El ejemplo anterior cambiará el color del texto en el elemento span dentro del elemento a cuando se pasa el mouse.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
B. Pseudoclase en cadena
Ejemplo
| a:primer hijo:hover { color: #0f0; } |
describir
Las pseudoclases se pueden encadenar para limitar la selección de elementos. El ejemplo anterior ubicará la primera etiqueta a debajo de cada elemento principal y le aplicará la pseudoclase P de desplazamiento.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
C.: flotar en elementos que no son de anclaje
Ejemplo
| div: flotar { color: #f00; } |
describir
La pseudoclase :hover se puede aplicar al estado de desplazamiento de cualquier elemento, no solo a las etiquetas.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
D.: pseudoclase del primer hijo
Ejemplo
| div li:primer hijo { fondo: azul; } |
describir
Cambie la pseudoclase para ubicar el primer elemento hijo del elemento padre de cada elemento especificado.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
Insectos
En IE7, si hay un comentario HTML antes del primer elemento secundario que se colocará, la pseudoclase del primer hijo no será válida.
E.: pseudoclase de enfoque
Ejemplo
| a: enfoque { borde: 1px rojo sólido; } |
describir
Esta pseudoclase ubica todos los elementos que tienen el foco del teclado.
Estado de soporte
| IE6 Sí IE7No IE8 Sí |
F. :antes y :después de pseudoclases
Ejemplo
| #caja:antes { contenido: "Este texto está delante del cuadro"; } #caja:después { contenido: "Este texto está detrás del cuadro"; } |
describir
Estos dos pseudoelementos agregan contenido generado antes y después del elemento especificado respectivamente, y se usan junto con el atributo de contenido.
Estado de soporte
| IE6 Sí IE7No IE8 Sí |
3. Soporte de atributos
A. El tamaño real generado por la posición.
Ejemplo
| #caja { posición: absoluta; arriba: 0; derecha: 100px; izquierda: 0; abajo: 200px; fondo: azul; } |
describir
Definir los valores superior, derecho, inferior e izquierdo para un elemento absolutamente posicionado le dará al elemento su tamaño real (ancho y alto), aunque no se establecen valores de ancho y alto.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
B. Altura mínima y ancho mínimo
Ejemplo
| #caja { altura mínima: 500 px; ancho mínimo: 300px; } |
describir
Estas dos propiedades especifican el ancho y alto mínimos del elemento respectivamente, lo que permite que un cuadro sea más grande que el valor mínimo especificado, pero no más pequeño. Se pueden utilizar juntos o por separado.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
C. Altura máxima y ancho máximo
Ejemplo
| #caja { altura máxima: 500 px; ancho máximo: 300px; } |
describir
Estas dos propiedades especifican la altura y el ancho máximos del elemento respectivamente. Se permite que un cuadro sea más pequeño que el valor máximo especificado, pero no más grande. También se pueden utilizar juntos o individualmente.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |