Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,664 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,664 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 :).