How to build a filtering component in pure CSS (2 methods)

In today’s tutorial, we’ll learn how to build a CSS-only filtering component, something which you’d be forgiven for thinking needs JavaScript. We’ll be using some simple markup, some form controls, and some really interesting CSS selectors that you may not have used before.

What We’re Working Towards

Each instructor here at Tuts+ has their own archive page. We’re going to recreate a tutorial list like this, using our own markup. Then, we’ll implement a component that will filter the posts based on the categories they belong to.

Here’s our final project:

This tutorial has been updated with another implementation that uses the new :has() selector ⬇️

Let’s get building!

1. Begin With the HTML Markup

We start by identifying the filter categories in our component. In this example, we’ll use seven filters:

All

CSS

JavaScript

jQuery

WordPress

Slider

fullPage.js

To do this, we first define seven radio buttons which we group under the categories keyword. By default, the first radio button is checked:

Then we create an ordered list which contains the labels related to the aforementioned radio buttons.

Keep in mind that we associate a radio button with a label by setting its id value equal to the label’s for value:

 class="filters">
  
     for="All">All
  
  
     for="CSS">CSS
  
  
     for="JavaScript">JavaScript
  
  
     for="jQuery">jQuery
  
  
     for="WordPress">WordPress
  
  
     for="Slider">Slider
  
  
     for="fullPage.js">fullPage.js
  


Next, we set up another ordered list which includes the elements we want to filter (our cards). Each of the filtered elements will have a custom data-category attribute whose value is a whitespace-separated list of filters:

 class="posts">
  class="post" data-category="CSS JavaScript">...
  class="post" data-category="CSS JavaScript">...
 
 


In our case, the filtered elements will be posts. So the markup we’ll use to describe a post along with its meta (title, image, categories) looks like this:

With the markup ready, let’s turn our attention to the required styles.

2. Define the Styles

We first visually hide the radio buttons:

1	input[type="radio"] {
2	position: absolute;
3	left: -9999px;
4	}

Then we add a few styles to the filters:

:root {
  --black: #1a1a1a;
  --white: #fff;
  --green: #49b293;
}

.filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.5rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: 2rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
}

.filters label:hover {
  background: var(--green);
  color: var(--white);
}

CSS Grid Layout

We continue by specifying some styles for the filtered elements. Most importantly, we use CSS Grid to lay them out differently depending on the screen size:

:root {
  --black: #1a1a1a;
  --white: #fff;
  --green: #49b293;
}

.posts {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
}

.posts .post {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.posts .post-title {
  font-size: 1.3rem;
}

.posts .post-title:hover {
  text-decoration: underline;
}

.posts figcaption {
  padding: 1rem;
}

.posts .post-categories {
  margin-bottom: 0.75rem;
  font-size: .75rem;
}

.posts .post-categories * {
  display: inline-block;
}

.posts .post-categories li {
  margin-bottom: 0.2rem;
}

.posts .post-categories a {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid;
  line-height: normal;
  background: all 0.1s;
}

.posts .post-categories a:hover {
  background: var(--green);
  color: var(--white);
}

@media screen and (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 650px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

Note: For readability reasons, in our CSS we don’t group common CSS rules.

Adding the Filtering Styles

The idea here is surprisingly simple. Each time we click on a filter, only the corresponding filtered elements (posts) should appear. To implement that functionality, we’ll use a combination of the following CSS goodies:

When we click on the All filter, all posts which have a data-category attribute will appear:

1	[value="All"]:checked ~ .posts [data-category] {
2	display: block;
3	}

When we click on any other filter category, only the target posts will be visible:

[value="CSS"]:checked ~ .posts .post:not([data-category~="CSS"]),
[value="JavaScript"]:checked ~ .posts .post:not([data-category~="JavaScript"]),
[value="jQuery"]:checked ~ .posts .post:not([data-category~="jQuery"]),
[value="WordPress"]:checked ~ .posts .post:not([data-category~="WordPress"]),
[value="Slider"]:checked ~ .posts .post:not([data-category~="Slider"]),
[value="fullPage.js"]:checked ~ .posts .post:not([data-category~="fullPage.js"]) {
  display: none;
}

For example as long as we click on the Slider filter category, only the posts that belong to the Slider category will be visible.

It’s worth mentioning that in our styles above instead of the [att~=val] syntax, we could equally have used the [att*=val] syntax. Here’s what that subtle change would look like:

[value="CSS"]:checked ~ .posts .post:not([data-category*="CSS"]),
[value="JavaScript"]:checked ~ .posts .post:not([data-category*="JavaScript"]),
[value="jQuery"]:checked ~ .posts .post:not([data-category*="jQuery"]),
[value="WordPress"]:checked ~ .posts .post:not([data-category*="WordPress"]),
[value="Slider"]:checked ~ .posts .post:not([data-category*="Slider"]),
[value="fullPage.js"]:checked ~ .posts .post:not([data-category*="fullPage.js"]) {
  display: none;
}

Quick CSS Selector Explanation

What exactly is this selector saying?

The first bit [value="CSS"]:checked looks for checked radio buttons with a specific value (“CSS” in this case).

After that, the tilde (~) is what we nowadays call the “subsequent-sibling selector”. It selects elements that have the same parent as the preceding element, even if they don’t immediately follow in the markup. So ~ .posts .post looks for the element .posts .post which shares the same parent as the checked radio input.

To get more specific still, :not([data-category~="CSS"]) refines our selector to only those .post elements which do not have a data-category attribute that contains a value of CSS somewhere within a space-separated list.

It then applies a display: none; to any elements which match those criteria.

It’s quite a complex selector, even though it’s perfectly logical. In human language terms you might describe it as:

“When the radio with a value of “CSS” is checked, find any subsequent-sibling elements that do not contain “CSS” in their data-category list, and hide them.”

Last Bit of Styling

As a last step, we add a rule which highlights the active filter category:

:root {
  --black: #1a1a1a;
  --white: #fff;
  --green: #49b293;
}

[value="All"]:checked ~ .filters [for="All"],
[value="CSS"]:checked ~ .filters [for="CSS"],
[value="JavaScript"]:checked ~ .filters [for="JavaScript"],
[value="jQuery"]:checked ~ .filters [for="jQuery"],
[value="WordPress"]:checked ~ .filters [for="WordPress"],
[value="Slider"]:checked ~ .filters [for="Slider"],
[value="fullPage.js"]:checked ~ .filters [for="fullPage.js"] {
  background: var(--green);
  color: var(--white);
}

3. Accessibility

This filtering is nicely accessible by default; thanks to the native way radio buttons and labels work we can filter our items with the keyboard keys. First press the Tab key to move focus to the checked radio button. Next press the Arrow keys to move focus and selection to the other radio buttons. Try it yourself:

That said, we haven’t paid any real attention to accessibility, so there might well be other a11y aspects that need improving.

4. Extra: Filtering With the `:has()` Selector

Let’s now rebuild this CSS-only toggle component by taking advantage of the modern :has() CSS pseudo-class. This flexible selector allows us to style elements that fulfil conditions defined inside the :has() function. In this case, we won’t use the :not() and ~ CSS selectors.

First, we hide all posts:

1	.posts .post {
2	display: none;
3	}

After that, we replace the filtering rules with these ones:

/*CUSTOM VARIABLES HERE*/

*:has([value="All"]:checked) .filters [for="All"],
*:has([value="CSS"]:checked) .filters [for="CSS"],
*:has([value="JavaScript"]:checked) .filters [for="JavaScript"],
*:has([value="jQuery"]:checked) .filters [for="jQuery"],
*:has([value="WordPress"]:checked) .filters [for="WordPress"],
*:has([value="Slider"]:checked) .filters [for="Slider"],
*:has([value="fullPage.js"]:checked) .filters [for="fullPage.js"] {
  background: var(--green);
  color: var(--white);
}

*:has([value="All"]:checked) .posts [data-category],
*:has([value="CSS"]:checked) .posts [data-category~="CSS"],
*:has([value="JavaScript"]:checked) .posts [data-category~="JavaScript"],
*:has([value="jQuery"]:checked) .posts [data-category~="jQuery"],
*:has([value="WordPress"]:checked) .posts [data-category~="WordPress"],
*:has([value="Slider"]:checked) .posts [data-category~="Slider"],
*:has([value="fullPage.js"]:checked) .posts [data-category~="fullPage.js"] {
  display: block;
}

Let’s isolate one of them and translate it into human language terms.

Consider this one:

1	*:has([value="CSS"]:checked) .posts [data-category~="CSS"] {
2	display: block;
3	}

We can describe it like this:

Check if there’s any (parent) selector that includes a checked radio button with the “CSS“ value. If that’s the case, find all descendant posts whose “data-category“ attribute contains the “CSS“ keyword and display them.

Or like this:

Match and display the posts whose “data-category“ attribute contains the “CSS“ keyword and are children of any parent element that includes a checked radio button with the “CSS“ value.

Here’s the resulting demo, as a reminder:

Conclusion

That’s it, folks! With just a few CSS rules and some structured markup, we managed to build two variations of a fully functional CSS-based filtering component.

I hope you enjoyed this exercise and that it has helped you expand your understanding of CSS selectors.

As always, thanks for reading!

More on CSS Selectors

Source link

Hosting Discounts

cloudways Discount
August 21, 2022
Hostinger Discount
August 21, 2022
DreamHost Discount
August 31, 2020