Different word, different colour {CSS}

[Adam]

Is there any way to have a different word become a different colour (of my choosing) using CSS?

Like this: different colours see?

I'm making a Tumblr theme and I want 5 different colours for the "tags" so each one follows a certain colour. Colour 1 = tag 1 etc.

Cheers and +rep to helpers!

[Calvin]

Hey, we'll add <span style="color: #ffffff">white</span>, and then a bit of <span style="color: #b73c11;">red</span>. Oh and, my favourite colour is <span style="color: #1bb0d5;">blue</span> or if you don't like HEX then <span style="color: blue;">this</span>

<span style="color: green;">green</span>, <span style="color: red;">red</span>, <span style="color: purple;">purple</span>

[Adam]

Needs to be dynamic, I'm not that stupid haha

There's no words to wrap styles around, it's dynamic as no two posts have the same tags... if you catch my drift.

[Calvin]

Ah my bad. I'm not much good with Tumblr, sorry!

Have you taken a look at the code in any current themes?

[Adam]

I've had a look around but I can't find a similar thing I want.

[Joe!]

You could try using the pseudo selector, nth-child. Only problem is, it isn't supported in IE.

Completed untested:

ul.tag-list > li:nth-child(1) {color: #7b7b7b;}
ul.tag-list > li:nth-child(2) {color: #333333;}
ul.tag-list > li:nth-child(3) {color: #CCCCCC;}

and so on, I think that's how it works, might be worth double checking though

[Shibby-Shabs]

Dunno if it would work but can't you do this in CSS3?

<span id='tags_area'><!--Tags Here --> </span>

CSS:

#tags_area(even) {color: /* color */}
#tags_area(odd)  {color: /* color */}

[Adam]

Dunno if it would work but can't you do this in CSS3?

<span id='tags_area'><!--Tags Here --> </span>

CSS:

#tags_area(even) {color: /* color */}
#tags_area(odd)  {color: /* color */}

If this works, would be possibly to do more than 2 not using odd and even more 1,2,3,4?

[hamheyelliot]

Joe's suggestion is perfect for this, using the example above:

<span class="tags"> </span>

.tags:nth-child(1) {color: #7b7b7b;}
.tags:nth-child(2) {color: #333333;}

and you could go on indefinitely.

You can also use basic algebra such as :nth-child(2n+1) etc. to do repetitions.

It only works in more modern browsers though, so IE8 for example will not follow nth-child rules.

[Adam]

Trying this out, I've probably gone wrong:

www.adamwingie.com

The tags are on the first post.