Cómo se leen los selectores. Css para iniciarse 12.5.12
Cómo se leen los selectores. Css para iniciarse
Una particularidad que suele pasar desapercibida es la forma en que los selectores de Css son leídos por los navegadores, y que, por otra parte, es la mejor forma de hacerlo también nosotros para comprender mejor a qué elemento afectan las declaraciones.
La particularidad es que se leen de derecha a izquierda. Sí, en cada selector se debe comenzar por el elemento (o pseudoelemento) más próximo al corchete { de apertura y continuar hacia la izquierda.
Lo veremos mejor primero con un ejemplo de lo más sencillo y muy común en cualquier página:
p.aviso a.cita span {
color: red;
}
Y así es como lo lee el navegador y debes leerlo tú:
Poner en color rojo todos los span que estén dentro de los enlaces ( a ) que tengan una clase cita y que estén en los párrafos ( p ) cuya clase sea aviso .
Y como ejercicio, otro selector un tanto enrevesado para que ejercites la lectura de selectores Css de derecha a izquierda:
ul:hover + div p {
/* declaraciones */
}
Aquí hay una particularidad: el selector de hermano adyacente ( + ). Las propiedades se deben aplicar a un elemento cuando la acción (:hover en este caso) la recibe otro.
Así que la lectura se parte en ese selector (también con el de hermano ( ~ ) quedando así:
Al hacer hover sobre una lista ( ul ) aplicar los estilos a los párrafos ( p ) que estén dentro del div que sea hermano y además adyacente a esa lista.
Sencillo, ¿no? ¿Lo complicamos un poco más a ver qué tal?
Para que te entretengas aquí va:
#primero:target ~ #galeria:hover + div > ul li:nth-child(2n+1) a span + span:after
{
/* declaraciones */
}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Tu último ejemplo... estuve casi 2 hs, pero lo saqué :)
ResponderEliminarGracias.-