CODEWITHSUNDEEP
javascriptcss
Jonathan
Jonathan

Reputation: 11321

How do I give successive CSS classes different colors (Javascript)?

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?

Upvotes: 1

Views: 1849

Answers (8)

clairesuzy
clairesuzy

Reputation: 27624

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.net/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

Upvotes: 3

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

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.net/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]);  
  });
});

Upvotes: 1

Gareth
Gareth

Reputation: 5719

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

Upvotes: 1

capi
capi

Reputation: 1453

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>

Upvotes: 1

Allen Hamilton
Allen Hamilton

Reputation: 1178

Here you go:

<html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/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>

Upvotes: 0

Xhalent
Xhalent

Reputation: 3944

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>

Upvotes: 1

Steven Ryssaert
Steven Ryssaert

Reputation: 1967

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.

Upvotes: 0

Thorben
Thorben

Reputation: 6981

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.

Upvotes: 1

Related Questions