Nuevos Selectores en CSS3
Ahora nosotros podemos aplicar estilos específicamente a cualquier elemento que nosotros deseemos.
Anteriormente ya vimos los selectores con la etiqueta, con class y con id.
Ahora veremos unos mas específicos, que nos permiten seleccionar cualquier elemento.
Selectores por Atributo
Imaginemos una etiqueta "input" puede asumir diferentes formas de acuerdo al atributo "type" el cual puede recibir diferentes valores como: (text, checkbox, radio, etc.) entonces mediante los selectores de atributos podemos especificar un determinado tipo de valor.
Por ejemplo:
- Si nosotros aplicáramos estilos a la etiqueta "input", todas aquellas etiquetas input de diferentes tipos serán afectadas
- Con el selector de atributos podemos especificar que tipo de etiquetas input seran modificadas
input[type="text"]{Este selector se puede hacer sin el uso de la etiqueta, aunque pueden existir errores si usted ocupa un atributo muy general
background-color: #CCCCFF;
}
not
Pueden existir ocasiones donde usted desee realizar una selección inversa.
Imagine que usted quiere aplicar un estilo a todos los párrafos, excepto a aquellos que no pertenecen a una clase específica (para este ejemplo la clase se llamará "normal").
p:not(.normal) {El estilo anterior va a darle un borde rojo a todos los párrafos, excepto a los que esten dentro de la clase "normal"
border: 1px solid red;
}
nth-child
El selector "nth-child" permite seleccionar uno o mas elementos en un grupo.
Este selector puede recibir formulas algebraicas para referir su valor como an+b.<!DOCTYPE html><html lang="es"><head><style>p:nth-child(3){background:#ff0000;}</style></head><body><h1>Título</h1><p>Primer párrafo</p><p>Segundo párrafo</p><p>Tercer párrafo</p><p>Cuarto párrafo</p></body></html>
En el ejemplo anterior cada dos elementos será afectado por el estilo<!DOCTYPE html><html lang="es"><head><style>p:nth-child(2n){background:#ff0000;}</style></head><body><h1>Título</h1><p>Primer párrafo</p><p>Segundo párrafo</p><p>Tercer párrafo</p><p>Cuarto párrafo</p></body></html>
Otra fórmula similar puede ser:
También exsten una serie de palabras reservadas que pueden hacer referencias específicas, en estos casos CSS emplea las palabras even y odd, los cuales se emplean juntos para colocar colores alternos a una tabla grande por ejemplo.<!DOCTYPE html><html lang="es"><head><style>p:nth-child(2n+1){background:#ff0000;}</style></head><body><h1>Título</h1><p>Primer párrafo</p><p>Segundo párrafo</p><p>Tercer párrafo</p><p>Cuarto párrafo</p></body></html>
p:nth-child(even){
background-color: red;
}
p:nth-child(odd){También existen variaciones en la forma de escribir este selector:
background-color: red;
}
- :nth-last-child(N): Trabaja igual que el ":nth-child:", excepto que la cuanta comienza del ultimo al primero
- :nth-of-type(N): Trabaja igual que el ":nth-child:", excepto que discrimina un tipo específico.
- last-child: Este selector, afecta al último elemento
- last-nth-of-type(N): Trabaja igual que el ":nth-of-type(N):" solo que la cuenta comienza del último al primero
- first-child: Este selector, afecta al primer elemento
No hay comentarios:
Publicar un comentario