Using CSS combinators to create a "filter" for item

Question

I have a list of items and 4 checkboxes that correspond to item colors. What I need to achieve is when a checkbox is clicked all items that don't match the color are filtered out. I have managed to achieve a behavior where the whole list of items is not visible at first and desired items appear on click. But I need to have them all visible at first and desired items to stay whereas not desired items must disappear.

My HTML

<div class="left-column">
            <input type="checkbox" checked name="blue" id="blue">
            <label for="blue" class="blue"></label>
            <input type="checkbox" checked name="green" id="green">
            <label for="green" class="green"></label>
            <input type="checkbox" checked name="pink" id="pink">
            <label for="pink" class="pink"></label>
            <input type="checkbox" checked name="red" id="red">
            <label for="red" class="red"></label>
            <div class="filter-items">
                <div class="green item"></div>
                <div class="red item"></div>
                <div class="green item"></div>
                <div class="pink item"></div>
                <div class="blue item"></div>
                <div class="red item"></div>
                <div class="green item"></div>
                <div class="pink item"></div>
                <div class="blue item"></div>
                <div class="blue item"></div>
                <div class="red item"></div>
                <div class="blue item"></div>
                <div class="red item"></div>
            </div>
        </div>

My CSS

input{
display: none;
}
label{
    padding-left: 1px;
    display: inline-block;
    background-color: green;
    width: 44px;
    height: 25px;
    cursor: pointer;
  }
.blue{background-color: blue}
.green{background-color: green}
.pink{background-color: pink}
.red{background-color: red}

.filter-items{
    width: 100%;
    height: 600px;
    background-color: darkcyan;
}
.item{
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
}
input{display: none}

input#green:checked ~ .filter-items .item.green,
input#red:checked ~ .filter-items .item.red,
input#pink:checked ~ .filter-items .item.pink,
input#blue:checked ~ .filter-items .item.blue{
    display: none;
    border: 1px solid rgb(128, 5, 5);

}
  input:not(:checked) + label{
    background: none;
    box-shadow: none;
    margin: 5px 3p 1px;
  }

Could this be achieved using combinator selectors or should I look somewhere else? Thanks!

Amr Noman · Accepted Answer · 2018-05-16 08:52:56Z

1

You mean something like this:

input {
  display: none;
}

label {
  padding-left: 1px;
  display: inline-block;
  background-color: green;
  width: 44px;
  height: 25px;
  cursor: pointer;
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

.pink {
  background-color: pink
}

.red {
  background-color: red
}

.filter-items {
  width: 100%;
  height: 600px;
  background-color: darkcyan;
}

.item {
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
}

input:not(:checked)~.filter-items .item {
  display: none;
}

input#green:not(:checked)~.filter-items .item.green,
input#red:not(:checked)~.filter-items .item.red,
input#pink:not(:checked)~.filter-items .item.pink,
input#blue:not(:checked)~.filter-items .item.blue {
  display: block;
}

input:not(:checked)+label {
  background: none;
  box-shadow: none;
  margin: 5px 3px 1px;
}

<div class="left-column">
  <input type="checkbox" checked name="blue" id="blue">
  <label for="blue" class="blue"></label>
  <input type="checkbox" checked name="green" id="green">
  <label for="green" class="green"></label>
  <input type="checkbox" checked name="pink" id="pink">
  <label for="pink" class="pink"></label>
  <input type="checkbox" checked name="red" id="red">
  <label for="red" class="red"></label>
  <div class="filter-items">
    <div class="green item"></div>
    <div class="red item"></div>
    <div class="green item"></div>
    <div class="pink item"></div>
    <div class="blue item"></div>
    <div class="red item"></div>
    <div class="green item"></div>
    <div class="pink item"></div>
    <div class="blue item"></div>
    <div class="blue item"></div>
    <div class="red item"></div>
    <div class="blue item"></div>
    <div class="red item"></div>
  </div>
</div>

edited May 16, 2018 at 8:52

answered May 16, 2018 at 8:41

Amr Noman

2,64715 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Wolther Over a year ago

Works just like I wanted to! Thanks!

Amr Noman Over a year ago

You're welcome, simplified the code above to join them in one rule.

Collectives™ on Stack Overflow

Using CSS combinators to create a "filter" for item

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related