Maldecaps amb :nth-child(n)

  • Posted on: 8 December 2011
  • By: dani

Qui diu que el CSS és fàcil? Sovint ens trobem coses "rares", tot i que una vegada ho aprens veus que poden tenir sentit.

A can pimpampum estem provant de fer servir el selector :nth-child per poder estructurar columnes. Aquest selector és de CSS3 i tot i que semblaria que molts navegadors (sobretot explorer) no ho admeten, és una solució ideal per adaptar un layout als navegadors de mòbils (android i iphone) que tenen navegadors web d'última generació, el que s'anomena "responsive design"

:nth-child té la forma genèrica an+b, on b és el primer element afectat i a és la periodicitat. De manera que 3n+1 hauria de seleccionar el primer element, el quart, el seté, etc..

Doncs al provar-ho  ens vam trobar amb un problema, semblava que no funcionava, quan en realitat és que no ho havíem entès bé.

Veiem-ho en aquest exemple

el css diu:

#page .columna:nth-child(3n+1) {
 background-color: #Fc0;
 clear: both;}

La primera columna hauria d'estar marcada en groc i amb un "clear", però resulta que no ho fa fins la tercera.

Que està passant doncs?

La resposta és que nth-child considera tots els elements fills del pare! En el cas anterior al mateix nivell que les columnes tenim un "h2", que tot i no ser afectat per les regles css si que es té en compte a l'hora de comptar els elements!

Veiem que en aquest altre exemple on hem tret l'h2 funciona correctament.

Què podem fer doncs? Realment el que hauríem de fer servir en aquests casos és el selector :nth-of-type, que compta només els elements seleccionats al css

Contenido relacionado

Eines útils per la mineria de dades

  • Posted on: 18 September 2014
  • By: dani
Taller Open Data organitzat per Julià Minguillón

He assistit a la tercera part del taller d'Open Data, organitzat per Julià Minguillón de la UOC.

Aquesta tercera part estava dedicada a les eines d'anàlisi de dades mitjançant mètodes estadístics i lamineria de dades, termes implicats però que fan referència a temes diferents

Us en faig un resum de les 3 més utilitzades a continuació: