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

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

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

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

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 :).