Juanguis

Desde CSS-Tricks nos presentan algunos de los errores más frecuentes que como regla general todo el que inicia en CSS comete, o por lo menos da lugar a dudas. Haya sido o no nuestro caso, vale la pena retomarlos y aclarar el tema.

Tag qualifying

.class {}

p.class {}

¿Cuál es la diferencia entre ambos?

El primero seleccionará todos los elementos que contengan el nombre de esa clase. El segundo seleccionará únicamente los elementos de esa clase que estén dentro de un elemento párrafo.

 El orden de los selectores importa

.class div { color:red }

div.class { color:green }

¿Por qué son diferentes?

En el primer ejemplo tenemos un espacio en blanco entre .class y div, indicando que estamos seleccionando «Cualquier div que sea descendiente de cualquier elemento cuya clase sea class». En el segundo caso se seleccionan los divs que sean de la clase class.

 La verdad detrás del uso de IDs

Al CSS no le importa mucho si utilizas clases o IDs, siempre y cuando les apliques algún estilo. En teoría con los IDs es más rápido, pero en la práctica no notarías la diferencia.

Si trabajas con Javascript, debes asegurarte que no haya IDs repetidos. Aparte  Javascript sí trabaja más rápido con IDs.

Los IDs tienen un mayor valor para CSS, si aplicas un estilo a un elemento que tiene una clase y un ID, lo que se tomará en cuenta será lo especificado por el ID.

Hovers

div:hover div { color:green; }

:hover es un selector que se aplica sólo cuando el mouse pasa por encima de un elemento en particular. Lo extraño es que no necesariamente se debe dar estilo al elemento que está activando el hover. En el ejemplo superior se está dando estilo a los divs descendientes del elemento div que está siendo cubierto por el mouse, pero no a él mismo.

Los espacios en blanco no importan

Esto:

div{color:red}

Es lo mismo que:

div      {

color        :          red;

}

Para lo único que se ocupan espacios es para especificar la descendencia de los selectores, por ejemplo

ulli { } no es lo mismo que ul li { } . Y claro, también se necesitan en caso de que quieras darle cierto orden a tu código CSS.

Sobre la escritura de clases

div { font-size:18px; font-weight:bold;font-size:22px;}

En caso de haber repetido alguna propiedad CSS aplicará como estilo la última listada, en el ejemplo el texto del div sería de 22px.

El orden en CSS importa

Si tienes dos selectores con las mismas especificaciones, como los siguientes:

.red { color:red; }

.green { color:green; }

Y después son aplicados al mismo elemento, el último selector será el que se aplique. El nombre de las clases dentro del llamado que se hizo en HTML no importa.

<div class=»red green»> Será VERDE</div>

<div class=»green red»> Será VERDE</div>

Visto en: css-tricks