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

My icons are not working

In this vidio I am doing everything right but the icon is not coming out. What am I doing wrong? Here is my code: /* Base Styles -------------------------------- / body { font-family: 'Nunito', sans-serif; line-height: 1.5; color: #384047; padding: 10px 0 80px; } div { max-width: 610px; margin: auto; } ul { list-style: none; padding: 0; } li { margin-bottom: 14px; } a { color: #4183c4; } / Substring Matching Attribute Selectors ---- */ 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

You have

href=$

instead of

href$=

in your icon selectors

Thank you