And then I have a series of labels. And each label has a for attribute that matches the id of the radio button. So what this does is allows me to come into the page, click on Design, for example, and this label will trigger the appropriate input. So in this case, clicking the Design label, is highlighting the second radio button. Now if I scroll down in the html even further, we can see that inside of the section area, we have a series of anchor links, with the data-skill attribute, and I've put text in here to signify which one of these items relate to the individual radio buttons.
So we have design, js, css. In some cases we have two items. So this one here for creating a responsive web design has design and css. And if I continue to scroll down, we'll see that one of these, down at the bottom, the Expandable Panels with jQuery, uses js and css. So now that we're familiar with how the html file is set up, let's go back to the exercise files and let's open up style.css in our text editor. And so once you have the style.css file open, let's scroll down.
Let's find the rule that targets the labels. Let's come in here and let's first hide those radio buttons. So I'll type input, then a space, add in our brackets, split this open and let's set the display type of those to none. Save your css. Back in the Browser we'll now see that those radio buttons are now hidden. Back in the css, let's come in here and set a selected state for the label if it corresponds to the checked radio button.
So what we'll do is we'll type input, then a pound sign, then type in all. So we're going to target the input with an id of all, which is the first one that says Show All. Then we're going to type colon, then the pseudo class of checked, then the space. Then we're going to use a tilde, this is going to be the sibling combinator, which means it's going to select the label that we're going to specify, if it follows this particular input with an id of all. So after the tilde, we'll hit a space.
Type in label. Put in square brackets for our attribute selector. Then we're going to type for equals two quotes, and then all. So with that in place, add in our brackets. Then we'll come in here and set a color property to black, so pound sign and three zeros. Next line, we're going to set a background color. We're going to set that to a light gray. So I'll type a pound sign and three letter Es.
And then finally, we'll come in here and set a border color to black. So pound sign and three zeros. So with this in place, we can hit Save. Back in the Browser, we'll now see that the first item shows up as black, since the first check box is selected, with an id of all, the label with a for attribute of all is now being targeted. So now we want to have this work for all of the different states. So back in the css, let's get our cursor after the attribute selector for all. Let's hit a comma.
And then I come in here and copy this entire line. We'll paste this three more times. Remove the comma on the last one. And then for the second item, let's change the id from all to design. Let's change the label for attribute to design. Next line, let's change all to css. We'll change the for attribute to css. And then for the last line, we'll change the for attribute to js, and we'll change the id to js, as well.
Save your css. And now back in the Browser, we can click on each one of these items, and they will show in their selected state. And now to do the sorting, we're going to use the same sibling combinator technique. So back in the css, let's hit a few returns. Scroll down here a little bit. We're going to do something very similar. We're going to type input, pound sign, then design, colon, then type in checked and a space, tilde, space.
Then we're going to go into the section element. So section, space A, then square brackets for our data attribute selector. Then we'll type data-skill. Then we'll type tilde equals, then two quotes. Then inside the quotes, we'll type in design. So the tilde equals here, means that we're looking for that particular string inside of that data-skill attribute. And since we're looking for the string, this means we can have more than one.
So then outside of the square brackets, let's put in our curly brackets. Let's split this open. Let's set a display type to block. Then let's come in here, copy this entire rule, let's paste it on the next line, and let's come in here, after the section space A, and before the data attribute selector, we're going to type a colon, then the letters n-o-t for not. And then we're going to put the entire attribute selector inside a parenthesis.
So we have a colon not, beginning and ending parenthesis, and then the data-skill attribute containing the letters design. So if this is all true, we're going to come in here and set the display type to none. Let's hit Save. Back to the Browser. Let's come over here and click on Design. Any of the items that do not have the letters design as part of the value of its data-skill attribute will be hidden, otherwise the items will show. And now to complete this, let's go back to the css. Let's come in here and copy both of those rules that target the id of design.
Let's hit a few returns. We'll paste this, hit a few more returns, paste this again. For the second set, we'll change design to css. And then for the third set, we'll change design to js. So we'll change the ids and the values. And so with these in place, let's go back to the Browser. Let's hit re-load. And now we can click on each one of these labels, and all of the corresponding courses will show and hide, based on the value of the data-skill attribute and the corresponding checked radio button.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.