Change Color and Font Size of First Letter - All words - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Change Color and Font Size of First Letter - All words

smanderson16

8:49 pm on Jan 4, 2007 (gmt 0)

Does anyone know how to change the Color and Font Size of First Letter in ALL Words of Sentence. Here is the code. I want the B, the I, and the D all in a different color and a larger font size. Ultimately, when someone hovers over the link, I want the B I & D color to remain the same but have the other characters change colors. One step at a time though...

<a href="bid.html" class="bid">Builders Information Department</a>

text-transform:capitalize won't work because I need more than just capitalization.

I have tried .bid:first-letter but that only changes the first letter of the first word in a paragraph, not ALL words in the paragraph.

I would appreciate help if anyone can. Thanks,

Robin_reala

12:12 am on Jan 5, 2007 (gmt 0)

As you’ve discovered, ::first-letter only refers to the first letter in an element, not the first letter in every word. To do what you want I’m afraid you’re going to have to wrap the first letter of every word in a <span> and then style that, e.g.:

.bid { color: black; }
.bid span { font-size: 1.2em; color: red; }
.bid:hover { color: blue; }
.bid:hover span { color: red; }

penders

3:07 pm on Jan 5, 2007 (gmt 0)

...you could then use a spot of JavaScript to automate the process of wrapping the first letter of every word in <span> elements?

smanderson16

4:51 pm on Jan 5, 2007 (gmt 0)

That worked great!

Thank you so much.

smanderson16

4:53 pm on Jan 5, 2007 (gmt 0)

In reference to the javascript, I would have no clue how to do that. I only know very basic javascript.

Robin_reala

5:07 pm on Jan 5, 2007 (gmt 0)

I did attempt to write a JS solution in my first reply but I ran out of time and had to abandon it. If I get a spare moment I'll have another look at it.

Fotiman

5:51 pm on Jan 5, 2007 (gmt 0)

Here's a JavaScript solution. Note, I added an ID to the link and used that to find and style the element. If you wanted to use a class instead (and apply this to many links), you'll need to change the style rules accordingly and change the functions to get an array of elements by their class name instead of using getElementById.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <title>Test</title> 
 <style type="text/css"> 
 #BID { color: black; } 
 #BID span { font-size: 1.2em; color: red; } 
 #BID:hover { color: blue; } 
 #BID:hover span { color: red; }  
 </style> 
</head> 
<body> 
<a href="bid.html" class="bid" id="BID">Builders Information Department</a> 
<script type="text/javascript"> 
// This is just a namespace 
var FOTI = function(){ 
 return { 
  /** 
   * Initialize the page behaviors 
   */ 
  init : function() { 
   FOTI.capBID(); 
  },   
  /** 
   * Replace the contents of BID with span wrapped first characters 
   */ 
  capBID : function() { 
   // Get the link to replace 
   var a = document.getElementById("BID"); 
   if(!a ) return; 
   // Parse the text into an array 
   var arr = a.innerHTML.split(" "); 
   // Generate span's for each item in the array 
   for( var i = 0; i < arr.length; i++ ) 
   { 
    arr[i] = "<span>" + arr[i].substr(0,1) + "</span>" + arr[i].substr(1); 
   }    
   // 4. Replace the contents of the original link 
   a.innerHTML = arr.join(" "); 
   //alert(a.innerHTML); 
  } 
 }; 
}(); 
window.onload = FOTI.init; 
</script> 
</body> 
</html>

smanderson16

2:23 am on Jan 6, 2007 (gmt 0)

WOW, that is awesome. Thanks so much for this. Do you want a job? :)