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
Ben Gray
5,829 Points"ends with" selector images not applied
I successfully selected the .pdf and .doc anchors with the following code:
a[href$=".pdf"]{
background-color: url('../images/pdf.png') no-repeat 0 2px;
padding-left: 25px;
}
a[href$=".doc"]{
background-color: url('../images/doc.png') no-repeat 0 2px;
padding-left: 25px;
}
The padding became visible, but the images were not present in the space created by the padding.
My directory structure is:
~/
|
----> index.html
----> css/
|
----> style.css
----> images/
|
----> doc.png
----> pdf.png
Why aren't my pdf and doc icons appearing next to my anchors?
2 Answers
Ben Gray
5,829 PointsI was using the incorrect property; for including an icon in this way, the background property should be used, rather than the background-colour attribute I was using.
So, the CSS should look like this:
a[href$=".pdf"]{
background: url('../images/pdf.png') no-repeat 0 2px;
padding-left: 25px;
}
a[href$=".doc"]{
background: url('../images/doc.png') no-repeat 0 2px;
padding-left: 25px;
}
István Turupoli
11,950 PointsHi! You used the background-color property, it only accepts color. When you are using shorthand codes you need to use the background property, to accept all. -edit: you were quicker :)
Ben Gray
5,829 PointsHaha yep, beat you to it. Thanks anyway, though :)