Cómo utilizar nuevos selectores css3
CSS3 soporta varios nuevos selectores con interesantes nuevas capacidades de las que debería estar familiarizado. Puede usar estas nuevas capacidades para mejorar las páginas en aún mejores maneras que antes.
selección de atributos
Ahora puede aplicar un estilo a cualquier elemento con un valor de atributo específico. Por ejemplo, el entrada etiqueta toma diferentes formas, todas determinado por el tipo atributo. Si se aplica un estilo único a la entrada elemento, que el estilo se aplica a muchos tipos diferentes de elementos: casillas de verificación, campos de texto y botones de radio. Mediante el uso de la nueva sintaxis de atributo, se puede aplicar un estilo a cualquier elemento de entrada:
de entrada [type ="texto"] {Background-color: # CCCCFF-}Puede aplicar el estilo con o sin un tipo de etiqueta, pero es posible tener efectos secundarios inesperados si se elige un atributo muy común.
no
Hay veces que desea una selección inversa. Por ejemplo, imagine que quería aplicar un estilo a todos los párrafos que no son miembros de la especial clase:
P: No (.Special) {border: 1px sólido rojo-}nth-child
los nth-child selector le permite seleccionar uno o más elementos de un grupo. La versión básica utiliza una entrada numérica:
#myListgt; li: nth-child (1) {border: azul-sólido 1px}Esto le permite aplicar un estilo a la primera de un grupo de elementos. En el ejemplo, hay una lista con los cuatro elementos. El estilo se aplica a los elementos de la lista, no la lista.
Video: 4. Curso de CSS - Selectores
El valor numérico en realidad puede ser una fórmula, como un b +. Si te gusta el álgebra (y quién no), puede seleccionar todos los elementos de número par como este:
#myListgt; li: nth-child (2n) {border: azul-sólido 1px}Una fórmula similar se puede utilizar para recoger los niños impares.
#myListgt; li: nth-child (2n + 1) {border: azul-sólido 1px}Se podría utilizar este sistema fórmula para obtener todo tipo de agrupaciones, pero la mayoría de la gente simplemente necesita un elemento en particular, o todas las filas pares o impares. suministros CSS3 acceso directo de palabras clave, incluso y impar, por lo que no tiene que hacerlo usando las matemáticas:
Video: Tutorial CSS3: Selectores en CSS
#myListgt; li: nth-child (incluso) {color: blanco-background-color: rojo-}La palabra clave le permite escoger el último elemento de un grupo. Hay algunas más variaciones de esta técnica de selección:
: Nth-last-child (N): Funciona igual nth-child, excepto los recuentos desde el extremo del grupo de elementos en lugar de al principio.
:de n-ésimo de tipo (N): Este selector funciona igual nth-child , excepto que se filtra a un tipo específico e ignora todos los elementos que no son de exactamente el mismo tipo de elemento.
último niño: Este (como es natural) se selecciona el último elemento secundario.
última de n-ésimo de tipo (N): funciona como de n-ésimo de tipo, pero desde el extremo del grupo.
primer hijo: Agarra el primer elemento (técnicamente esto estaba disponible en CSS2, pero rara vez se utiliza).
Video: CSS: selectores CSS3
Estas herramientas de selección son totalmente compatibles en todos los navegadores actuales. Sin embargo, ya que generalmente se utilizan simplemente para facilitar la lectura, debe ser seguro para usarlos. Los navegadores más antiguos simplemente omitir el estilo.
Otras nuevas pseudo-clases
Las pseudo-clases permiten especificar estilos en función del estado de un elemento. CSS moderna es compatible con una serie de nuevos pseudo-clases:
Video: TUTORIAL CSS3 Parte 5 /12. Selector de atributos en CSS3
:flotar: los :flotar pseudo-clase ha sido una parte de CSS desde el principio, pero fue definido oficialmente sólo para el etiqueta. Ahora el :flotar Pseudo-clase se puede aplicar a cualquier elemento. Si el ratón está sobre un elemento, este elemento tiene el estado activado. Tenga en cuenta que los dispositivos móviles no siempre apoyan porque la posición del dispositivo de puntero no se conoce hasta que se active el elemento.
:atención: los :atención Pseudo-clase se activa cuando un elemento está preparado para recibir la entrada del teclado.
:activo: Un elemento de formulario está activo cuando se está utilizando actualmente: por ejemplo, cuando un botón se ha pulsado, pero aún no liberado. Los dispositivos móviles suelen pasar directamente al modo activo sin pasar por flotar modo. Esto puede ser una importante consideración de diseño cuando se utiliza el estado para el peinado.
Las pseudo-clases estatales son totalmente compatibles con todos los navegadores modernos excepto la familia de navegadores IE. Hay un apoyo limitado, pero con errores, incluso en las primeras versiones de IE.