Playing with the CSS3 UI selectors
A really powerful group of selectors has been added into CSS3 Selectors specs, this group can be clustered as UI selectors. UI selectors enable us to create rules that apply to elements that are enabled, disabled and even checked. In this lecture we will take our first look into jQuery and see how its selector engine works with a live example of a JavaScript code I've created that switches the language dynamically based on user selection. By the end of this lesson, you will know all the new CSS3 UI Selectors and how to work with them both via CSS and via JavaScript using jQuery.
properties: jquery, css3 ui selectors, disabled, enabled, checked
Video Transcript
00:00Our next group of selectors is UI selectors, as I named them, which are basically selectors that enable us to control the way UI elements look like.
00:10Let's jump right into them. It's going to be a lot of fun.
00:14This lecture is exclusively CSS3, and our focus is going to be input elements, mainly ones that are clickable, such as a radio box or a checkbox, but not only.
00:25Any element that could actually be clicked, it could be a button as well.
00:29Our focus will be on a radio button, but what we're going to learn now, which is applicable to the world of CSS3 selectors, is going to be applicable to every clickable element in HTML.
00:41Alright, so every clickable UI element, more accurately.
00:45So let's get started. To get us started, I'm going to go into my HTML right in the beginning of my body, and I'm going to go ahead and what I want to do is I want to create a few input boxes.
00:57So I'm going to go ahead and create an input. I'm going to select the type to be a radio box, and I'm going to set it to have a name, which will be language, and I'll set an ID to it of English.
01:13Now, the reason why I'm setting an ID on top of is because I want to refer to this item directly, and I'm going to set also a value to this element, and the value will be English.
01:23Now, when I'm saying that I want to refer to the item directly is really a question of accessibility.
01:27If I wanted to, I could have put just the words English. That's fine.
01:32But from an accessibility point of view, if I just set my content this way,
01:37blind users, users that are disabled might have a difficulty understanding that this copy correlates this button.
01:45To make sure that they can, we're going to use also a label, and with the label, I'm going to want to associate that element with this ID.
01:53So I'm going to go ahead and create your label, and I'm going to say it's for, for what? For the EN, that item that has the label EN, and it is in English.
02:03And there we go. We've just created our first radio box. Although our copy, our content is CSS3 and not HTML, I'm going to continue on relatively quickly adding a few more items,
02:15and I'm just going to go ahead and copy them one by one because I already pre-created them while you were away.
02:22So I'm adding here also the French French, which we've talked about before, but the difference between this one,
02:27and I'm going to make sure that this is also connected to the FRFR.
02:30Well, actually, I need to make sure that I put your NID of, let's set your NID of FRFR,
02:39and I'm just going to go ahead there and set it to call it FRFR.
02:42Now, notice that this item is also checked, which basically means that it is selected in HTML5.
02:47I could just word the word checked or put any value inside of the value here.
02:52Traditionally, most people just write the word checked, checked twice, and if it's enabled, enabled twice or disabled, disabled twice,
03:00the three common controllers to selectors.
03:04Now, checked basically will make sure that this item is selected.
03:07So we added English. We just added French French.
03:10Let's go ahead and add another one now that let's add the Canadian French.
03:14So I'm going to go ahead here and just add one more item, which will be the Canadian French.
03:19And last but not least, I want to also add a Denmark French, which we never created.
03:24And because we never created it, I'm going to go ahead and also make sure that it is disabled.
03:30But I'm going to go ahead also and make sure that this language code for our FRCA will also correlate.
03:35So I'm going to go ahead and create your NID.
03:37I'm going to set the ID to be FRCA.
03:43And I'm going to do the exact same thing for our Denmark and friends FRDE.
03:49I'm just creating an ID as well.
03:52And I'm going to go ahead here and add that ID to this item FRDE.
03:57Just make sure that these are unique element, unique IDs that are not replicated in any other area inside of your application.
04:04So that's it. There we go.
04:05We just added our input boxes, our radio boxes more accurately.
04:09And now you'll see that our Denmark French is disabled.
04:12But it's not really well defined, even though it's not clickable, the item, it doesn't look like it's not clickable, is it?
04:19Because our label did not get disabled automatically as well.
04:23What I want to do next is I want to go ahead and start talking about the CSS properties that have been introduced in CSS 3.
04:30Let's jump right into our styling rules.
04:33And in our styling rules, I'm just going to scroll down to the last place where we left things.
04:37And this time around, we're talking about CSS 3 input selectors.
04:46And it's really not exactly the name, but there's a few different names, but it doesn't really matter.
04:51Let's start ahead with starting with defining.
04:54How about we want to define our checkbox?
04:56But really, we don't want to change the nature of the checkbox.
04:59And if you do, make sure to check our references because we added in their tutorial
05:04about how to change the styling with CSS of checkboxes.
05:08So make sure to check that out.
05:10But we're going to use the default checkboxes.
05:12And personally, I prefer using the default because it's more standard.
05:15We're leaving it to the browser.
05:17But then you might have scenarios where you have a really visual page where you just can't do that.
05:22In our case, we're not going to change that default.
05:25And I'm going to go ahead and I want to check the checked.
05:28And this is very, very similar to those pseudocodes that we've seen for links in an earlier state
05:33where we had visited and link, active, hover, focus.
05:40So very similarly, similarly, we have checked.
05:44Now, again, don't forget that now that we set it to check, what I'm basically saying is anything that's checked.
05:49If I wanted to be more specific, I would put in all the other rules that we've met earlier to define exactly what I want.
05:55In this case, I'm saying basically anything that is checked.
05:58Anything that is checked in my case, I want to go ahead and set my font size.
06:03I'm going to go ahead and double the font size.
06:08Go ahead and save that.
06:09Put it in the double normal font size.
06:12If I go ahead and refresh, we'll see that now our selected item.
06:16Oh, and I need to make sure that I'm saving it.
06:19So let me oh, right, right, right.
06:20I almost completely forgot.
06:22So I'm doubling the font size, but does that really matter?
06:24No, because our label is not there.
06:26So I'm going to have to take advantage of something we learned not that long ago of adjacent combinator.
06:32So I'm going to go ahead and say, by the way, whatever is selected, go ahead and select the label right next to it.
06:39And that label right next to it, go ahead and make its size twice bigger.
06:43So I go ahead and click on refresh here.
06:44We'll see now Canadian French is larger.
06:47And each time I click onto a specific item, it's going to automatically become much larger.
06:52And really, in this case, I think just a smaller percentage growth of 20% will probably do the trick.
06:59All right.
07:00So now that we've seen the check, I want to just go ahead and show you auto the different selectors for enabled and disabled.
07:07Now, they work very similarly.
07:09So I'm just going to scan through them really quickly.
07:14And I'm going to do this also for the label, because I'm fine with the styling that exists for our actual radio box.
07:29But what I want to do is I want to set the font color.
07:32I want to set the color.
07:33Actually, there's not a font.
07:34I want to set the color to how, but we'll set it to some sort of a gray.
07:38How about we'll just, yeah, let's just some sort of a gray.
07:40Let's do it a light gray.
07:41So I'm going to set here CC, CC, CC, six times C.
07:45So that way, I'm mixing all the different colors together evenly, very close to that maximum value of FFFF, which would be completely white.
07:54So as we get closer to the values upper higher, we're going to get a lighter shade of gray when we're mashing them all together.
08:00Again, if we had your all zero, it would be completely black.
08:03But if we're notching them all together in the same capacity, we're going to get a color that is less black injected with more white and more white.
08:11All right, equally balanced between all three items.
08:15So I'm going to go ahead here and just save this.
08:16And now we'll see that for our enabled buttons, they're going to kind of look disabled now, which is definitely not our intent.
08:23So I'm going to go ahead and change this from enable to disabled.
08:27And I'm just going to quickly also create one for enabled.
08:30And let's set a different color for enabled.
08:34And for enabled, how about we set a dark color.
08:36So I'm going to go ahead here and select your really light gray.
08:40And go ahead and refresh my item.
08:44And that's it.
08:45Those are the CSS 3 selectors.
08:47And you can see the selector is dimmed out.
08:50It makes it more obvious that it's different than all the rest.
08:53Our item, our font is growing slightly as we click into it.
08:57Now, I want to wrap up this this really lecture by showing you a little bit of CSS, a little bit of JavaScript.
09:03We're not going to create the JavaScript ourselves in this lecture, but I went ahead and created it for you.
09:09So please feel free to scan through it.
09:11If you know already JavaScript would be a fantastic opportunity for you to basically play around with it and see it.
09:16And even if not, it's an opportunity for you to look.
09:19So I went ahead right now and I just added our jQuery script, which is basically a plugin that enables us to do JavaScript coding more easily.
09:26It's a third party plugin.
09:28We have courses on it and on JavaScript.
09:30So if you want to learn JavaScript, make sure to check those courses out.
09:34And we're going to talk about our custom script, which I've added in.
09:38It's in your source files.
09:39Make sure to take a peek at it.
09:41And I want to walk through this with you so you understand what's going on here.
09:44You don't have to memorize or know exactly what it's doing.
09:47If you don't know JavaScript, what I'm doing here is I'm I have here an on ready function,
09:52which a function basically triggers whenever the document is ready with the usage of this code in line 14.
09:58And in this line, what's happening here is I'm basically saying looking.
10:02This is a CSS rule, a CSS selector rule.
10:05I'm basically saying your any input, which is name is language.
10:08Whenever it changes, make sure to trigger a function that will change the language.
10:13And then I'm sending the value that is inside here in each each selection button.
10:17The value itself I'm sending on to a function called change language.
10:23By the way, I'm also doing the exact same thing.
10:25Whenever the application loads, as soon as it loads, I'm basically checking to see what is the item that is checked.
10:31Notice how we're using this new feature that we just learned about.
10:35And I'm sending its value to our change language to make sure that we upgrade, update the language.
10:40And in this line, we're basically going ahead to all the different.
10:44We're starting off with a CSS item that has just been changed to the language that is selected.
10:49And I'm asking to all body elements that have the language that we selected to become displayed.
10:56Same is true for our all items that are not our language to be displayed as none.
11:04And if I go ahead and save this and go back into my browser and click on refresh,
11:07you'll see that now whenever I'm selecting a language of French French is my default now.
11:11And you'll see that only the French French is going to be visible here, the law France.
11:16And if I go ahead and I change it to English, we'll see that now we have an error here.
11:21So let me just check the Canadian French and the Canadian French is working.
11:25French French is working. English is not working means meaning that we probably have a coding error.
11:31So if I go ahead here, a coding error, most probable is here in the name itself.
11:36And if we go ahead into our language, we'll see that the English code for English is en not eng.
11:41So I'm going to go ahead here and just change that value to en instead of eng.
11:45At some point, I must have added that in by mistake.
11:48And if we go ahead here and just click on refresh, we'll see that now our default is going to work.
11:52And notice also, if you know a little bit of JavaScript, then this is going to be interesting.
11:57This rule makes sure that if I just commented out, if it was not here and the user would go and just select the different languages as Canadian French.
12:06And then it would go, let's say to English.
12:08And then I would click on refresh.
12:10Notice how it's not going to be in English, even though I wanted it to be.
12:14And that is because the default in our CSS will automatically show our French version.
12:19So to avoid that scenario, that's exactly the reason why this extra line in line five was added,
12:24forcing to update the language based on whatever the input is selected as soon as our application loads.
12:31So that's it about these advanced selectors that are new to CSS3 that are widely available on most browsers, most modern browsers at this stage.
12:40They're incredibly useful.
12:42And as long as you're building it with some sort of backup capability or when you're working in plug-in languages such as jQuery and you're using with these features,
12:52then jQuery could then figure out a background solution to try to figure out if that is not natively supported.
13:00So all these rules that we're learning here about selectors are automatically useful and very, very powerful when you're working also with programming languages like jQuery,
13:10where in jQuery the rule that you put inside here is basically the CSS selector and we've learned a lot of CSS selectors.
13:17So if you know a little bit of JavaScript or played around a little bit with jQuery,
13:21it's time for you to go on and grab your jQuery and start playing around with it using selectors.
13:25You're going to see you could do amazing things just with the stuff we learned so far.
13:30This chapter is not over, but we're definitely getting close to that.
13:33We're continuing to look into CSS selectors and we're done with these CSS3 selectors.
13:38We'll see you in the next lecture as we continue our journey to discover all the various CSS selectors.