From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Filter a list

Filter a list - CSS Tutorial

From the course: CSS Shorts

Filter a list

- [Instructor] Hi, this is Chris Converse, and in this episode we'll use CSS and radio buttons to dynamically filter a listing of items on a webpage, without using any JavaScript. So if you'd like to follow along, download the exercise files, and let's begin by opening the html file in a text editor. So before we work in the CSS file, let's take a look at what's happening inside of the html. So we have a link to our style.css. We'll be opening that in a moment. By scroll-down, we have an article element inside of the body. We have an h1 in a paragraph. Then we have a series of radio buttons, all of these input items here. 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…

Contents