I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name.
I tried it in this jsFiddle but even if first 3 blocks (first row) are sized correctly, next 3 ones are not.
.sintesi-offerta > .block:nth-child(1n) {
width: 40%;
}
.sintesi-offerta > .block:nth-child(2n) {
width: 20%;
}
.sintesi-offerta > .block:nth-child(3n) {
width: 40%;
}
How to set .block:nth-child(...) in order to have first and fourth block with 40% width, second and fifth with 20% and so on?
If I understand this correctly,all you need to do is change your CSS to the following:
.sintesi-offerta > .block:nth-child(3n+1) {
width: 40%;
}
.sintesi-offerta > .block:nth-child(3n+2) {
width: 20%;
}
.sintesi-offerta > .block:nth-child(3n+3) {
width: 40%;
}
Side note: your br tags should be <br/> for jsfiddle to interpret them correctly.