CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Substring Matching Attribute Selectors - "Begins With" and "Ends With"

Sam Weeks
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Posted by Sam Weeks
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
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Sam Weeks
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,333 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,333 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
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Sam Weeks
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 :).