sass: primer hijo no funciona

No he usado SASS durante mucho tiempo y quería saber si hay algunos problemas con pseudo-elementos como :first-child o :last-child?sass: primer hijo no funciona

Fuente

2011-05-02 ApPeL

¿Cuáles son los problemas? – sandeep

En ** scss ** tuve que hacer: 'div {> div: nth-child (1) {styles}}' – protoEvangelion

Si bien @Andre tiene razón en que existen problemas con los pseudo elementos y su compatibilidad, especialmente en los navegadores antiguos (IE), ese soporte mejora constantemente.

En cuanto a su pregunta, si hay algún problema, diría que realmente no he visto ninguno, aunque la sintaxis para el pseudo-elemento puede ser un poco complicado, especialmente cuando primero lo susto. Por lo tanto:

div#top-level 
    declarations: ... 
    div.inside 
    declarations: ... 
    &:first-child 
     declarations: ...

que recoge como uno esperaría:

div#top-level{ 
    declarations... } 
div#top-level div.inside { 
    declarations... } 
div#top-level div.inside:first-child { 
    declarations... }

no he visto ninguna documentación sobre nada de esto, salvo por la afirmación de que "Sass puede hacer todo lo que puede hacer css. " Como siempre, con Haml y SASS, la sangría es todo.

Fuente

2011-05-19 16:23:19 nomadkbro

Muy útil: como se indicó anteriormente, no te olvides de poner ** y ** delante de **: primer hijo ** como en ** &: primero -child ** –

En su ejemplo, ¿no debería esperar que se compile en div # top-level: first-child? The &: first-child está fuera del bloque div.inside, ¿por qué se aplicará a div.inside? – Danny

@Danny: Absolutamente correcto: he actualizado el ejemplo para reflejarlo. – nomadkbro

En primer lugar, todavía hay navegadores que no son compatibles con esos pseudo-elementos (es decir: first-child,: last-child), por lo que debe 'tratar' este problema.

No es un buen ejemplo de cómo hacer que el trabajo sin necesidad de utilizar pseudo-elementos:

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

- ver el ejemplo de tubo separador.

Espero que haya sido útil.

Fuente

2011-05-02 10:58:03 sfat

En una nota lateral, es bueno saber que: first-child está con nosotros desde CSS2 y por lo tanto, es ampliamente compatible, mientras que: last-child se ha agregado solo en CSS3. – Ronny

Estoy de acuerdo contigo @Ronny, pero aún así, la gente tiene que enfrentar algunos problemas con las versiones anteriores de los navegadores Aunque: first_child apareció en CSS2, los navegadores antiguos actúan con errores. Referencia: http://reference.sitepoint.com/css/pseudoclass-firstchild – sfat

Sí, pero cuando se trabaja en los casos más comunes: eliminando el primer/último borde y similares, no hay razón para usar el par aún menos selector compatible. Aparte de eso, estoy a favor de la degradación agresiva ;-) – Ronny

Creo que es mejor (para mi expirience) para utilizar: :first-of-type, :nth-of-type(), :last-of-type. Se puede hacer con un pequeño cambio de reglas, pero pude hacer mucho más que *-of-type, que *-child selectores.

Fuente

2013-04-25 22:47:36 IGRACH

Respuesta

Cuestiones relacionadas