How to set DIV's width based on CSS indexes

Question:

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.

Related:

submitting form then showing loading image by javascript

Click on link next link should be display on same page

How To Check Value Of String

why i don't get return value javascript

Google map infowindow position on custom marker

How do I display my mysql table column headers in my php/html output?

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

Dynamically select from a dynamically generated dropdown

Target next instance of an element/div

HTML CSS Two 2-column tables side by side with same height and width

Centering navbar pills vertically within the navbar using flexbox

tag in HAML