Использование CSS-комбинаторов для создания «фильтра» для элемента

Question

У меня есть список предметов и 4 флажка, которые соответствуют цветам предметов.Чего мне нужно добиться, так это при нажатии на флажок, все элементы, которые не соответствуют цвету, отфильтровываются.Мне удалось добиться поведения, при котором весь список элементов сначала не отображается, а нужные элементы появляются при нажатии.Но сначала мне нужно, чтобы все они были видны, а нужные элементы остались, а ненужные элементы должны исчезнуть.

Мой 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>

Мой 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;
  }

Может ли это быть достигнуто с помощью combinator selectors или я должен искать в другом месте?Спасибо!

Answer 1

Вы имеете в виду что-то вроде этого:

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>