Transcript from the "Exclude Selector" Lesson
[00:00:00]
>> Jen Kramer: We didn't really mean to do that to the radio buttons though, right? We actually wanted everything but the radio buttons. So not the radio buttons. And we actually have the same problem here with our checkbox too, right? So not the checkbox. So all the input types, but not the radio buttons, and not the checkboxes, right?
[00:00:19] Okay, I have something crazy here for you. So we're gonna change the selector, there's actually a not, how cool is that? So we can say not something. And what I'm going to do here, inside of the parentheses for not, we're gonna put in some square brackets, and we're going to say type = radio.
[00:00:50]
>> Jen Kramer: So like I said, this is a crazy selector. This is well beyond where you are, but I just wanna give you a little bit of something, to show you there's more out there to learn, okay? So when you see square brackets like this, that is an indication that this is called an attribute selector.
[00:01:07] So far we've been selecting everything with HTML tags, right? We select our aids, we select our paragraphs, we select our whatever, our labels, our legends. But this time, we're selecting by our attribute. So in other words, type = radio. So this selector, so far, says input. All the input tags, but not the radio buttons, do this, right?
[00:01:35]
Save that, let's see what that looks like.
>> Jen Kramer: Woo, much better? So we fixed that little problem. We also need to fix the checkbox though, don't we? So we can pile these on top of each other. So let's pile another one on here, not, once again. And inside of here, we're gonna say type = checkbox.
[00:02:08]
>> Jen Kramer: There's no spaces in any of that. So input colon, not type radio, not type checkbox, which does work. Okay, so that keeps our formatting. When you have a selector that doesn't work at all, it just throws out the styling for that particular item. And you saw how the whole page broke at that point, or not the whole page, but all the styling associated with that selector, it all broke at the same time.
[00:02:34]
>> Jen Kramer: All right, now I have one more thing I wanna add to this. This is good for everything, but I'd also like to apply it to the text area, down here at the bottom, I'd also like to apply it here. So what could I do to add all these same styles to the text area down on the bottom?
[00:02:55]
Besides the craziness I have here right now. Hint, you do know how to do this, yeah?
>> Speaker 2: Comma, select?
>> Jen Kramer: Comma, text area, in this case, it's the text area. So for all the inputs, but not the radio buttons and not the checkboxes, and for the text area, this is the crazy thing I wanna do.
[00:03:23]
So just to show you, there's way more for you to learn, here in CSS. And then, isn't that nice? Look at all those nice big input boxes. They line up, isn't that lovely? Aren't you happy? I'm happy.
>> Speaker 2: Is the size of the input box based on the font size then?
[00:03:45]
>> Jen Kramer: The size of the input boxes have to do with, we have a width here associated with that, the width. We put in some padding, and we also put in a font size in here too. And I also put in, because remember what I was telling you about, pointy corners and rounded corners?
[00:04:04]
Look at all those form fields, what have they got?
>> Speaker 3: Pointy corners.
>> Jen Kramer: Unsightly pointy corners.
>> [LAUGH]
>> Jen Kramer: Okay, so border radius, 10 pixels. You can round the corners of anything, go on ahead and put that in. And you should have, so lovely. Aren't those pretty? So pretty, yes?
[00:04:33]
>> Speaker 2: So the border radius also gave me those weird 3D effects.
>> Jen Kramer: It does give you kinda those weird 3D effects, right? You could set your border to none, and that should make that go away.