I have annotated text, and I'd like certain annotated words to be color-coded along with their annotations, but I don't want to have to do it manually. Is there a way to have javascript (or jquery) or even css make the first class="Noted" green, then the second blue, and then on the fifth go back to green, and to do the same with the corresponding class="note"s?

I have annotated text, and I'd like certain annotated words to be color-coded along with their annotations, but I don't want to have to do it manually. Is there a way to have javascript (or jquery) or even css make the first class="Noted" green, then the second blue, and then on the fifth go back to green, and to do the same with the corresponding class="note"s?

• javascript
• css

• is the class of "noted" on inline elements.. like a span, any way you can give a use case sample and any browser restrictions? – clairesuzy Commented Mar 22, 2011 at 11:30
• No browser restrictions for the moment. They're all inline elements. I figured out how to get the <span class="Note">s in the margins, but now I just need to color code them so it's not too confusing. – Jonathan Commented Mar 22, 2011 at 11:35
• Ok this is what I'm trying to do: jsfiddle/ZfwPT – Jonathan Commented Mar 22, 2011 at 11:49

8 Answers 8

you can do this using :nth-child you will need something like jQuery for support for IE though.. working on that...

here's a first fiddle for a CSS only version http:http://jsfiddle/zhQ67/2/ ** FIDDLE updated with new code below **

CSS:

.noted:nth-child(4n+1) {
  background: green;
}

.noted:nth-child(4n+2) {
  background: red;
}


.noted:nth-child(4n+3) {
  background: yellow;
}


.noted:nth-child(4n+4) {
  background: blue;
}

final update using thirtdots updated code and including some jQuery for IE - JSBIN Page

Ok, based on your jsFiddle you could use something along these lines to get the result you're after:

p:nth-child(5n+1) .Noted, p:nth-child(5n+1) .Annotation {color: green}

as demonstarted in this modification of your jsfiddle

You can get all elements with getElementsByClass an then simply iterate through them, giving every single one and it's corresponding element class="note" a different color.

In jquery.....set the colors as you see fit. jsFiddle demo

<script type="text/javascript">
    $(".Noted").each(function(i,e){
    switch(i%4){
        case 0: $(this).css({color:"#f00"});break;
        case 1: $(this).css({color:"#0f0"});break;
        case 2: $(this).css({color:"#00f"});break;
        case 3: $(this).css({color:"#ff9"});break;
        case 4: $(this).css({color:"#f90"});break;       
    }
});

</script>

First, try encapsulating your elements inside a container. It will make the children selection much easier.

<div id="parent">
     <span class="note">Green</span>, <span class="note">blue</span> 
     then <span class="note">red</span>.
</div>

then, the js :

<script>
var  children = document.getElementById('parent').getElementsByTagName('*')
    ,colours = ['green','blue','red','orange']
    ,i,j=0,max;

for (i = 0, max = children.length; i<max; i++) {
    if(children[i].getAttribute('class') == 'note') {
       children[i].setAttribute('style','color:' + colours[j]);
       j++;
       if (j>colours.length) {
          j = 0;
       }
    }
}
</script>

If the HTML is being generated by a server side script, you could have the script assign a class based on which Annotation is being generated, then in the stylesheet, assign a color to that class, like so:

.note1 { //Corresponds to class='note1'
  color: green; //or whatever you want
}
.note2 { //Corresponds to class='note2'
  color: blue; //or whatever you want
}
/* and so on */

If the HTML is simply being written statically, then assign the class corresponding to how it defined in the stylesheet, depending on the color you want.

If they are children, you could use something along the lines of clairesuzy's solution.

The other option is to assign all of them as class note and then have an javascript that colors everything marked as class note based on a predefined order that you set.

That would probably be along the lines of something like this (using jQuery):

Demo here: http://jsfiddle/hs8Nm/

<p class="note">Note 1</p>
<p class="note">Note 2</p>
<p class="note">Note 3</p>
<p class="note">Note 4</p>

and the corresponding Javascript:

$(document).ready(function(){
  var colors = ['green','blue','orange','yellow',"FFFFF0"]; //Assign your color order here.
  $('.note').each(function(index){
      this.css('color',colors[index%5]);  
  });
});

Yes, it can be done using CSS Selectors. You can get the first, second, third, and so on element in a list of matching occurences.

Here you go:

<html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <title>Cycle classes</title>

<style>
.blue {

    background-color: blue;
}

.green {

    background-color: green;
}

.yellow {

    background-color: yellow;
}
</style>

<script>


$(document).ready( function() {
$(".Noted").each(function(i) {
    var classes = ['green','blue','yellow'];
    $(this).addClass(classes[i % classes.length])
});

})

 </script>



</head>

<body>

 <div class="Noted">hello</div>
 <div class="Noted">world</div>
 <div class="Noted">it works</div>
 </body>
</html>