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

Seth Barthen
Seth Barthen
11,266 Points
Posted by Seth Barthen
Seth Barthen
11,266 Points

How to get CSS rule to apply to stuff that begins with...

Trying to use the ^= command so I don't have to type this whole thing out like below. 

.fi-social-facebook,
.fi-social-twitter,
.fi-social-pinterest,
.fi-rss {
    font-size: 40px;
    margin: 0px;
    color: $mainNavColor;
}

Further, I want to use a hover command as well to get them to change color when I hover over them. I'm using Sass so I tried doing &:hover, but that didn't work... I'm guessing because I have 4 different classes. Will this work when I use the ^= instead because it's one command? Thanks

2 Answers

Adam Menczykowski
Adam Menczykowski
2,319 Points
Adam Menczykowski
Adam Menczykowski
2,319 Points 
[class*=" fi-"], [class^="fi-"] { 
   font-size: 40px;
    margin: 0px;
    color: $mainNavColor;
}

Is that what you mean?

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

[class^="fi-"]... yes! thank you... i knew it was from one of the earlier videos but i forgot the actual format. Thanks so much :)