The attr() CSS Function

So another useful thing about pseudo elements, is that we can use simple CSS 0:00 functions, to return generated content based on an element's attribute, and 0:04 I'll show you what I mean, so if we take a look at the markup, for 0:10 our two download links, notice how the top link's title value. 0:13 Is jpg, and the bottom link's title value is ZIP,so, 0:19 we're able to generate this exact text next to each link just like we 0:24 did with our icons,in the HTML file, you'll notice that our two links, 0:29 are nested inside an unordered list, with the class d-loads, or downloads. 0:34 So let's go over to our style sheet, and we'll create our pseudo-element rule, 0:40 by first targeting the downloads class,then we're 0:46 gonna target the descendant anchor elements. 0:52 And then we'll add the after, pseudo element,so next, 0:55 we'll need to define the content property,and as the value for 1:02 this content property, we're going to define the attribute function. 1:06 So we're gonna type attr followed by a set of parentheses,and this is 1:11 where we'll tell the browser, which attribute's value we want to insert. 1:16 In this case, we want to insert a link's title value as content, So 1:20 right inside the parentheses let's type title. 1:24 Next we'll add a few css properties to style this generated text,so first let's 1:29 display it in line block, with the display property and the value in line block. 1:35 And we'll follow that with a color property, 1:43 where we'll want to set the color back to it's initial color. 1:46 So, let's add the value initial, and let's also change the font size, 1:49 with a font size property, and let's make the font size value .65em. 1:54 And finally, we'll want to give it a little bit of, 2:01 separation on the left side, so let's do that with a left margin value of 5 pixels. 2:03 So again, what this does is, it takes the value, of the attribute we specify, 2:10 which in this case is the title attribute, and it places, 2:15 it as text,next to the element,in this case, it will place it after, the element. 2:19 So, what we should see now, are the words JPG and 2:24 ZIP generated next to each link respectively. 2:27 So, let's save our style sheet, and once we refresh the page, that's exactly what 2:30 we're seeing,the link's title values are immediately placed after the text. 2:35 Cool, and we're able to do this with just about any attribute,so for 2:40 instance, sometimes we may want to create a print version of our page. 2:44 And for those we'd usually, 2:48 like to display a links full URL next,to the link text, since we can't click on it. 2:50 So to do that, we can simply insert a links href value as generated content, 2:56 So for instance if we replace,title with href and refresh the page. 3:02 Notice how that displays the full URL of each link after, the link text, but in 3:09 our case, we'll want to display the title value, so let's change it back to title. 3:15 So finally, one of the most important things to keep in mind, 3:21 about pseudo elements, is that the generated content is 3:24 not exactly inserted before or after the actual element like we might think. 3:27 It's actually inserted, into the element as child content, so, we'll be able to 3:33 see exactly how this happens, if we apply a solid border around our download link. 3:38 So, let's go back to our style sheet, and, right below the, 3:43 pseudo element rule, we just wrote, let's targets, the downloads class once again. 3:46 And the anchor elements inside, and let's apply, 3:52 a solid border, with the border property. 3:55 So we'll make the value solid, one pixel,so now we should see any 3:58 child content, of the download links, contained within this border we set. 4:03 So let's take a look,once we've refreshed the page, notice how the generated 4:08 content is actually prepended, and appended, to the inside of the elements. 4:12 So they're inside of their box model,they're inserted before, and 4:17 after, the text, not before, or after the boundaries of the anchor elements. 4:21 Before we wrap up, 4:28 let's do a quick review of some of the more advanced, selectors we just learned. 4:28 First with the Nth child pseudo class, we can select all even or 4:33 odd child elements,or we can also get really specific and 4:37 use expressions, to target a combination of child elements. 4:40 And let's not forget about the nth-of-type pseudo class, for 4:44 targeting an element based on its position, no matter where it 4:47 is inside the parent, but only if it's a specific type of element. 4:50 And the root pseudo class always targets the root of the document, 4:54 this will usually be the HTML element, 4:57 and remember, the root selector, has more specificity than the html type selector. 4:59 The not pseudo class selects everything except the type of element we specify. 5:05 Finally, with pseudo elements, we can target virtual elements, 5:09 that don't exist in the source code, and we can insert generated, 5:14 content into our HTML from our CSS rules. 5:17 Again we're not required to memorize every single, 5:21 CSS selector available, but it's important that we're at least able to read, and 5:24 understand ,and many of the selectors, in case we encounter them in 5:28 the wild ,or find ourselves in one of those code conundrums, from earlier. 5:32 When we had limited access to the HTML. 5:36 To practice these selectors, on your own try revisiting previous projects, and 5:39 see if you can use some of these new selectors, in your style sheets. 5:43 Or as a good practice exercise, try getting creative, with these selectors and 5:46 see how many elements you can target on a page, without having to add any classes. 5:51 But try not to get too carried, away using these selectors, 5:55 on real projects, as designers and developers, it's our responsibility to 5:58 make our code as readable, predictable, and a maintainable as possible. 6:02 Imagine opening that project style sheet back up, a few months from now, and 6:06 spending hours trying to figure out which elements the selectors are targeting. 6:09 Not fun, right, so, that about does it for 6:14 CSS selectors, and we're always here to help and motivate you so, 6:17 if you have any questions, about the content we've covered in this course, 6:20 feel free to reach out to our support team, the wonderful treehouse community, 6:23 on our forum, or you can get hold of me on Twitter. 6:27 I'm @guilh. 6:29 Thanks everyone. 6:30