How to select the first, second, or third element with a given class name?

Question

How can I select a certain element in a list of elements? I have the following:

my text         


        
      

Answer 1

Perhaps using the "~" selector of CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

.myclass~.myclass~.myclass {
    background: green;
}

See my example on jsfiddle