This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Attribute Selectors Recap" Lesson
[00:00:03]
>> Estelle Weyl: Okay, so we've gone over a whole slew of attribute selectors. So just to recap, we have just the fact that it's present, the fact that it has an exact value.
>> Estelle Weyl: Starts with a language, I mean, it starts with a language or it starts with any character followed by a dash.
[00:00:42] Okay, that's what the pipe means. Starts with is the caret, dollar sign is ends with, and the star is anywhere within the element, and then the i means case-insensitive.
>> Estelle Weyl: So as I was talking about earlier, print media. Any time you have an abbreviation that has a title, you can add the long form of that title when you print it.
[00:01:17] Because they can't hover it over an abbreviation to see what that title is. Or each time you have something that starts with HTTP in your print style sheet, print the href. In your generated content value, ATTR wrap parenthesis means that you can actually print that attribute value. The attribute, whatever you put in there, will not be processed.
[00:01:45] Basically will be exactly as seen. So if you have a URL, it's not gonna print the image. It's gonna print the URL as written, the string. So if you want to play with a few of these, then let's play with a few of these. We can first start off by saying font size.
[00:02:05] I'm gonna make it much smaller so we can see the whole page. Well, you can actually scroll down. So here it says any Li that has a title, make it purple and make it bold. So we have
>> Estelle Weyl: two that have titles. Inside that title it says unicorn, right?
[00:02:29] So, I can say anywhere
>> Estelle Weyl: unicorn. Here it matches unicorn.
>> Estelle Weyl: Here it matches unicorn as well, but if I put a tilde it means a full word. I didn't cover that before so that's why I'm covering it here cuz it was below the fold. So the tilde says full word.
[00:03:00] And in the first one it says unicorns, that's not a full word. So it did not match, that is the one I missed. But if you go down to the bottom of the page, I'm just gonna make the font size much smaller, so that I can stop scrolling.
[00:03:19]
>> Estelle Weyl: Font size
>> Estelle Weyl: Let's make it smaller even, six there we go. And I put the wrong closing and that's why it didn't work. So as you'll see here it says li, title. So has the title attribute, that has a full word, space separated full word of unicorn matches the last one.
[00:03:53] If I add an s here, it'll match the first one. If I type it capital, it matches neither. And here's a moment of truth. If I add an i, will it match? Yes it does. So this browser supports case and sensitivity.
>> Estelle Weyl: If you wanna play with that, you can do that during the break.
[00:04:15] Let's move on.