Platiquemos de selectores

[Rafael]

A ver si masticamos un poco acerca de los selectores y combinaciones para entenderlos mejor.

Por ejemplo, ¿Cual es la diferencia entre

p+ul
y
p~ul
?

[ArturoGallegos]

pregunta fácil aunque el segundo selector es un tanto desconocido.

el selector + es para seleccionar hermanos adyacentes, es decir el hermano inmediato del primer elemento en tu caso afecta al elemento <ul> que este precedido por un elemento <p>

el selector ~ la misma función que el anterior con la diferencia que afecta a todos los hermanos que le sigan al primer selector, digamos que es un selector mas generalizado.

?¿ espero no equivocarme o al menos no andar tan perdido.....

[pzin]

Pues eso mismo.

http://codepen.io/pzin/pen/jmxDn

Aunque ~ suele ser más raro de usar, suele haber más situaciones para +.

[alexk]

ya esta * dicho
jeje

[ArturoGallegos]

Iniciado por pzin

Aunque ~ suele ser más raro de usar, suele haber más situaciones para +.

mas que el hecho que la situación lo permita, creo que es por el hecho de que muchas veces se desconoce su existencia o uso.

cosa que también pasa muy a menudo con el selector de negación :not , que a mi ver es un selector con mucha utilidad.

[pzin]

Justo ahora estaba haciendo un formulario.





Pero si, hay muchas que no se usan:

Se suele usar :nth-child() pensando que su funcionamiento es como el de :nth-of-type, o no usar odd/even, o incluso hacerlo reversible indicando un valor negativo (nth-child(-3)). Luego selectores de atributos, :empty y demás.

Y ahora, por hablar de cosas, el borrador de CSS incluye un módulo de variables: http://dev.w3.org/csswg/css-variables

Muchas cositas sin usar, desde luego.

[ryugen]

Por lo general la falta de utilización de cierto selectores (además del desconocimiento) es fruto de la necesidad de dar soporte a navegadores en los que no son compatibles.

Por ejemplo, en un proyecto en el que trabajo, en el cual IE8 es obligatorio, pasamos de estos selectores, ya que terminabamos haciendo doble selector por cada regla y resultaba innecesario.

[Rafael]

Yo estoy encantado con este:

a[href^="$Var"] combinado con php, para dar formato al link de la misma página.

Yo le daba la vuelta a estos selectores, pero hasta resulta divertido ir logrando que funcionen de manera que uno espera.

[Rafael]

He de decir, Pzin, ¡cómo aprendo cosas nuevas contigo!
Este código que pusiste me sorprendió por el &:

http://codepen.io/pzin/pen/oypvg

[pzin]

Iniciado por Rafael

He de decir, Pzin, ¡cómo aprendo cosas nuevas contigo!
Este código que pusiste me sorprendió por el &:

http://codepen.io/pzin/pen/oypvg

Bueno en realidad & no existe en CSS.

Ahí uso Sass, sin llaves, ni puntos y comas, usando mixins de Compass, si haces click en la pestaña CSS justo donde pone CSS, verás el código CSS compilado. Sass es como CSS con anabolizantes.

Y en lugar de HTML es Haml, que es más de lo mismo, para ahorrar escribir.

[Rafael]

¿eh?

Con razón no entendía

[Mikmoro]

Vaya, como ha avanzado CSS. Ya casi empieza a parecer otra cosa.