soy Kseso y esto EsCSS

Cómo se leen los selectores. Css para iniciarse

Cómo se leen los selectores. Css para iniciarse

Por Kseso ✎ 1

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 */ }

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 Don Kseso Kseso

Comentarios: 1

  1. Tu último ejemplo... estuve casi 2 hs, pero lo saqué :)

    Gracias.-

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap