Skip to main content
Drupal Answers

Return to Answer

added 1 characters in body
Source Link
Chapabu
Chapabu
  • 13.9k
  • 2
  • 40
  • 58

I know you said you tried nth-of-type, but have you tried nth-child?

Say for example you've added a class called myrows to your Views output (you can do this through the UI under style settings for anyone who doesn't know), then targetting every third row should be as simple as the following:

.myrows {
  //Make all rows red
  color: #FF0000;
}

.myrows:nth-child(3n) {
  //Make every third row green (not including the first)
  //So 3, 6, 9, 12 etc will be green
  color: #00FF00#00FF00;
}

Here's a jsFiddle just to show it working :)

Some useful resources:

I know you said you tried nth-of-type, but have you tried nth-child?

Say for example you've added a class called myrows to your Views output (you can do this through the UI under style settings for anyone who doesn't know), then targetting every third row should be as simple as the following:

.myrows {
  //Make all rows red
  color: #FF0000;
}

.myrows:nth-child(3n) {
  //Make every third row green (not including the first)
  //So 3, 6, 9, 12 etc will be green
  color: #00FF00
}

Here's a jsFiddle just to show it working :)

Some useful resources:

I know you said you tried nth-of-type, but have you tried nth-child?

Say for example you've added a class called myrows to your Views output (you can do this through the UI under style settings for anyone who doesn't know), then targetting every third row should be as simple as the following:

.myrows {
  //Make all rows red
  color: #FF0000;
}

.myrows:nth-child(3n) {
  //Make every third row green (not including the first)
  //So 3, 6, 9, 12 etc will be green
  color: #00FF00;
}

Here's a jsFiddle just to show it working :)

Some useful resources:

Source Link
Chapabu
Chapabu
  • 13.9k
  • 2
  • 40
  • 58

I know you said you tried nth-of-type, but have you tried nth-child?

Say for example you've added a class called myrows to your Views output (you can do this through the UI under style settings for anyone who doesn't know), then targetting every third row should be as simple as the following:

.myrows {
  //Make all rows red
  color: #FF0000;
}

.myrows:nth-child(3n) {
  //Make every third row green (not including the first)
  //So 3, 6, 9, 12 etc will be green
  color: #00FF00
}

Here's a jsFiddle just to show it working :)

Some useful resources: