Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Sebastian Wilson
Sebastian Wilson
15,710 Points

Change colour of first letter in div on hover

I would like to change the first letter only inside the div when I hover anywhere in the div please

<div class="color-change"> <p> Some Text about staff
</p> </div>

.color-change:hover{

background-color:green;

}

2 Answers

Brodey Newman
Brodey Newman
10,962 Points

Hey Sebastian, one way I usually do this would be to wrap a 'span' tag around the letter you wish to change like below:

<div class="color-change"> 
     <p> 
          <span class="letter-change">S</span>ome Text about staff
     </p> 
</div>

You should then be able to specify which color you want the 'letter-change' span to change to when hovering over the 'color-change' div, by using the code below. 

.color-change:hover .letter-change {
     color: green;
}

Let me know if this helps. :)

Sebastian Wilson
Sebastian Wilson
15,710 Points

Thank you works great!!! Think I need a refresh on CSS :P

Jose Carlos Garcia Zafra
Jose Carlos Garcia Zafra
2,090 Points
Jose Carlos Garcia Zafra
Jose Carlos Garcia Zafra
2,090 Points

.color-change:hover:first-letter { color: red; }