Non Non Biyori NonstopДеревенская глубинка 3
Просмотрены с 2-го по 5-й эпизоды[div=b-js-link to-process data-dynamic=switcher data-switcher=sw1 data-filter=f0]Фильтр 1[/div]
[div=b-js-link to-process data-dynamic=switcher data-switcher=sw1 data-filter=f1]Фильтр 2[/div]
[div=filterable_list cc-6-g0 d-flex flex-wrap]
[div=c-column m-0 p-2 data-filters=_f0]Элемент 1[/div]
[div=c-column m-0 p-2 data-filters=_f1]Элемент 2[/div]
[div=c-column m-0 p-2 data-filters=_f0_f1]Элемент 3[/div]
[/div]
[data-filter=f0].active ~ .filterable_list > :not([data-filters*=_f0]),
[data-filter=f1].active ~ .filterable_list > :not([data-filters*=_f1]) {
display: None;
}
Вариант 2 (лучше стилизовать, но плохая поддержка браузерами из-за :has
)[div=b-filter]
[div=filter_group]
[div=b-js-link to-process data-dynamic=switcher data-switcher=sw1 data-filter=f0]Фильтр 1[/div]
[div=b-js-link to-process data-dynamic=switcher data-switcher=sw1 data-filter=f1]Фильтр 2[/div]
[/div]
[div=filterable_list cc-6-g0 d-flex flex-wrap]
[div=c-column m-0 p-2 data-filters=_f0]Элемент 1[/div]
[div=c-column m-0 p-2 data-filters=_f1]Элемент 2[/div]
[div=c-column m-0 p-2 data-filters=_f0_f1]Элемент 3[/div]
[/div]
[/div]
.b-filter:has([data-filter=f0].active) .filterable_list > :not([data-filters*=_f0]),
.b-filter:has([data-filter=f1].active) .filterable_list > :not([data-filters*=_f1]) {
display: None;
}
Сортировщик[div=b-js-link to-process data-dynamic=switcher data-switcher=sw2 data-sort=s0]Сортировка 1[/div]
[div=b-js-link to-process data-dynamic=switcher data-switcher=sw2 data-sort=s1]Сортировка 2[/div]
[div=sortable_list cc-6-g0 d-flex flex-wrap]
[div=c-column m-0 p-2 data-sorts=_s0]Элемент 1[/div]
[div=c-column m-0 p-2 data-sorts=_s1]Элемент 2[/div]
[div=c-column m-0 p-2 data-sorts=_s0_s1]Элемент 3[/div]
[/div]
[data-sort=s0].active ~ .sortable_list > [data-sorts*=_s1] {order: -1;}
[data-sort=s0].active ~ .sortable_list > [data-sorts*=_s0] {order: -2;}
[data-sort=s1].active ~ .sortable_list > [data-sorts*=_s0] {order: -1;}
[data-sort=s1].active ~ .sortable_list > [data-sorts*=_s1] {order: -2;}
Таблица[div=cc-5a d-flex flex-wrap]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column m-0 flex-fill b-anime_status_tag studio p-1]...[/div]
[div=c-column][/div]
[/div]