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.

[Shibby-Shabs]

When I looked at the source you're tags showed like this:



<span class="tags">

<i> <a href="http://www.adamwingie.com/tagged/tag">tag</a></i>



<i> <a href="http://www.adamwingie.com/tagged/tagging">tagging</a></i>



<i> <a href="http://www.adamwingie.com/tagged/tag">tag</a></i>



<i> <a href="http://www.adamwingie.com/tagged/test">test</a></i>

</span>

This doesn't work because that is in one class, it would need to be like:


<span class='tags'><!-- Tag 1 --></span>
<span class='tags'><!-- Tag 2 --></span>
<span class='tags'><!-- Tag 3 --></span>


Edit: On Tumblr go to Appearance >> Custom HTML and find (Ctrl+F) something in the css part of the page that refers to "tags", copy and paste and then post here.

[hamheyelliot]

This doesn't work because that is in one class, it put need to be like:

Not necessarily, each tag can then be defined as .tags a so this next snippet should work:

First take the tags out of <i> tags and we'll italicize them in the css.

Use

.tags a {font-style: italic}
.tags a:nth-child(1) {color:#111111}
.tags a:nth-child(2) {color:#111111}
.tags a:nth-child(3) {color:#111111}
.tags a:nth-child(4) {color:#111111}

and go on for as long as you need replacing the colours.

[Shibby-Shabs]

Not necessarily, each tag can then be defined as .tags a so this next snippet should work:

First take the tags out of <i> tags and we'll italicize them in the css.

Use

.tags a {font-style: italic}
.tags a:nth-child(1) {color:#111111}
.tags a:nth-child(2) {color:#111111}
.tags a:nth-child(3) {color:#111111}
.tags a:nth-child(4) {color:#111111}

and go on for as long as you need replacing the colours.

I see what you mean, I think, but what I mean is each separate tag would need to be in a difference <span class='tags'> otherwise if there all in one then the colour would remain.

[hamheyelliot]

I see what you mean, I think, but what I mean is each separate tag would need to be in a difference <span class='tags'> otherwise if there all in one then the colour would remain.

They wouldn't need new spans, because there are individual <a> tags within the span tags which seperate themselves from each other, that's why you can use .span a combined with the nth-child property.

[Shibby-Shabs]

Ok, of course, I was missing the "a" when I was reading it. +rep too because as apart of my confusion I read about nth-child on w3schools and learnt something :)

[Adam]

They wouldn't need new spans, because there are individual <a> tags within the span tags which seperate themselves from each other, that's why you can use .span a combined with the nth-child property.
Got it working, thanks a bunch you two - very helpful!

[Shibby-Shabs]

You sure did and it looks great, nice job man!

[HotelUser]

I took a Javascript approach to this, and wrote the following short function:

Example: http://develop.davzy.com/test3.php



<html>
<head>
<script>
function setColour(selectorid,word,colour)
{
var content = document.getElementById(selectorid).innerHTML;
document.getElementById(selectorid).innerHTML = content.replace(word,'<span style="color: ' + colour + '">' + word + '</span>');
}
</script>
</head>
<body>
<div id='randomdiv'>
This is an example of some test you want different colours.
</div>
<script>
setColour('randomdiv','test','orange');
setColour('randomdiv','different','red');
setColour('randomdiv','example','pink');
</script>
</body>
</html>

[Adam]

I knew it'd be easily possible in Javascript but I really don't want use it. I believe CSS is the better language of the two.

Even still though, that wouldn't fit a dynamic model, would it? With no set words as it changes for every post.

[Joe!]

Glad you got there in the end :) nth-child is really quite useful ;)