Intermediate HTML & CSS

Attribute Selectors Solution

Jen Kramer

Jen Kramer

Intermediate HTML & CSS

Check out a free preview of the full Intermediate HTML & CSS course

The "Attribute Selectors Solution" Lesson is part of the full, Intermediate HTML & CSS course featured in this preview video. Here's what you'd learn in this lesson:

Jen demonstrates the solution to the Attribute Selector exercise.


Transcript from the "Attribute Selectors Solution" Lesson

>> How'd you guys deal with that? Good, somebody wanna tell me what do you did, tell me what I should type in here.
>> So I did href.
>> Okay, so href.
>> Yep and the dollar sign $= string of ".pdf".
>> ".pdf".
>> To select all the links that end in a pdf, and then I did the ::after, okay?

And did an attribute of content with space pdf, as a string.
>> Yeah, kind of like that? Yeah, did it work? Yeah it did, totally did, here it is right here, terms and conditions PDF, privacy policy, PDF, right? If you didn't get that far, you could always do.

By the way for your CSS debugging purposes, I thoroughly encourage you can start with href, something like *=, ".pdf". There's a PDF in there somewhere, right? And then you could say something like color: pink, Okay? Let's make it totally not readable very accessible, so there we go. Now you at least know that you're on the right track okay so yes, my attribute selector worked.

I'm selecting something that selects links that have the PDF on it. Then you can always up to another level, so here we've put in the double colon ::after. That's a pseudo-element that says after that element, we're gonna add this content string of PDF. Other things you can do here, I'm gonna point out some stuff a little bit later on.

As we get into formatting list items, you might be able to do something with an SVG. If you really want the little PDF icon, maybe you have an SVG of it, that would be something you could put in there. Or you can put in a background image. So you can put in a little bit of padding and then have a background image appear down at the end.

It's the way we used to do it in the old days. So, this is a great way particularly if you're working in government universities who just love their PDFs. Just put this in the code, and then they won't have to worry about putting in those PDFs ever again, PDF.

So, notice that Dan had the dollar sign the ending substring, totally cool. I just use my usual star equals for mine because I can never remember [LAUGH] whether it's the beginning or the ending substring. So you can be as particular as you want on those.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now