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

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

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Ends with substring puts icon at the beginning?

It's a bit confusing, so by using the "ends with" substring the icons are nicely put in front of the hyperlink. So, it is called "ends with" because the end of the hyperlink is targeted?

For example: url('../img/icn-pdf.svg') ---> The "ends with" selector is targeting the pdf part?

I am not sure if I understand it. Can someone give a bit more clarity? Thanks.

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Remember that "ends with" is a matching operator.

The target of a selector will always be an element (or pseudo-element), the "ends with" matching operator is just one of several ways to identify the target. No matter what part of a string you match with, the entire element for which the condition matches will be the target of the selector.

It's called "ends with" because it matches a string that has the characters given at the end. In the video example, the selector targets the entire link ("a") element but only if the href attribute of the link has a value that ends with ".pdf".

bill curry
seal-mask
.a{fill-rule:evenodd;}techdegree
bill curry
Front End Web Development Techdegree Student 7,841 Points
bill curry
.a{fill-rule:evenodd;}techdegree
bill curry
Front End Web Development Techdegree Student 7,841 Points

I was confused by this part, too--specifically how Guil placed the image to the left of the link.

The "ends with" selector has nothing to do with the placement of the img--it's all controlled by CSS. I think it's the padding-left property that pushes the link away. If you go to the CSS and comment that line out, you'll see how it was done.