2

HTML: 

<ul>
  <li class="a">Hi-1</li>
  <li class="b">Hi-2</li>
  <li class="b">Hi-3</li>
  <li class="a">Hi-4</li>
  <li class="b">Hi-5</li>
  <li class="b">Hi-6</li>
</ul>

CSS:

 li{
   list-style:none;
 }
.a{
   color:blue;
 }
.b:nth-child(odd){
  color:red;
}
.b:nth-child(even){
  color:violet;
}

click here

I want Hi-2, Hi-5 in red and Hi-3, Hi-6 in violet.

Venugopal
  • 1,888
  • 1
  • 17
  • 30
  • 4
    Possibly duplicate of http://stackoverflow.com/questions/17458582/css-selectors-nth-childeven-odd-with-class/ and http://stackoverflow.com/questions/10921809/css3-nth-of-type-restricted-to-class – Ilya Streltsyn Jul 08 '13 at 08:30
  • I think you want an nth-of-class selector - but that doesn't exist.. see http://stackoverflow.com/questions/13975475/css-global-nth-of-type-selector-nth-of-class (possible duplicate) – Danield Jul 08 '13 at 08:37

4 Answers4

0

How specified in other question in the comments, you can't restrict the usage of those pseudoclasses: so without using nth-* pseudoclasses and without changing your markup you could give this style

ul li:first-child + .b, .a ~ .a + .b { color: red; }
.b + .b { color: violet; }

example jsbin

Venugopal
  • 1,888
  • 1
  • 17
  • 30
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
0

Demo

li{
    list-style:none;
}
.a{
    color:blue;
}
.b:nth-child(2n),.b:nth-child(5n){
    color:red;
}
.b:nth-child(6n), .b:nth-child(3n){
    color:violet;
}
Abdul Malik
  • 2,632
  • 1
  • 18
  • 31
0

with different and pratical codes (to me) : HTML:

  <ul>
  <li class="c">Hi-1</li>
  <li class="b">Hi-2</li>
  <li class="a">Hi-3</li>
  <li class="c">Hi-4</li>
  <li class="b">Hi-5</li>
  <li class="a">Hi-6</li>
  </ul>

CSS:

li {
list-style : none;
}
.a {
color: violet;
}
.b {
color: red;
}
.c {
color : blue;
}

Fiddle: http://jsfiddle.net/WESnh/

Lightsaber
  • 125
  • 1
  • 8
0

Use this CSS:

.b:nth-of-type(3n-1){
  color:red;
}
.b:nth-of-type(3n-3){
  color:violet;
}

Demo here

otinanai
  • 3,987
  • 3
  • 25
  • 43