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 CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Substring Matching Attribute Selectors - "Begins With" and "Ends With"

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Posted by Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

Substring selectors not working to load icons...

any one know where i may be going wrong... any help much appreciated. Thanks You :)

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

a[href^="http:"] { color: #52bab3; text-decoration: none; background-repeat:no-repeat; background-size 18px 18px; padding-left: 25px;
}

a[href$=".pdf"] { background-image: url('../img/icn-pdf.svg'); }

a[href^=".jpg"] { background-image: url('../img/icn-picture.svg'); } a[href^=".zip"] { background-image: url('../img/icn-zip.svg'); }

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

1) You are missing a colon between background-size and 18px 18px.

2) You will want to use href$ instead of href^ for the extension since it comes at the end when setting the image

a[href^="http:"] {
  color: #52bab3;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding-left: 25px;
}

a[href$=".pdf"] {
  background-image: url('../img/icn-pdf.svg'); 
}

a[href$=".jpg"] {
  background-image: url('../img/icn-picture.svg'); 
}

a[href$=".zip"] {
  background-image: url('../img/icn-zip.svg'); 
}
Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

Thank you I did figure it out in the end It was the semi-colon that was the major issue, thought I was going mental . Thank you KRIS NIKOLAISEN for the quick response and help though much appreciated :).

Peter Huang
Peter Huang
5,427 Points

thank god for this. I was wondering why mine didnt show up and after copy and paste this, it works and I've missed a typo too.