Mam problem w sass

Witam,

robię sobie właśnie swój pierwszy poważniejszy projekt i nie wiem dlaczego to nie działa:

Czy ktoś mógł by mi pomóc? (Chodzi o ten fragment kodu, który zaznaczyłem)

Tu daję fragment kodu HTML dotyczący tego CSS jak by był potrzebny:

Pozdrawiam

nie działa

Co to znaczy?

Witam,

tu macie to w postaci kodu:
sass:

.filter {
    background-color: $main_bg_color;
    @include position(relative);
    height: auto;
    flex-basis: 16%;
    border-radius: 5px;
    z-index: 3;
    margin-right: 5px;
    &__fixed {
        display: flex;
        flex-direction: column;
        @include position(fixed);
        padding: 10px;
        width: 16%;
    }
    &__filter-radio {
        margin-right: 10px;
        &:checked+.filter__filter-elements {
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 5px;
        }
    }
    &__filter-elements {
        margin: 5px;
        background-color: $main_bg_color;
        border: none;
        padding: 5px;
        font-size: 16px;
        transition: 0.4s;
        &:hover {
            background: #fff;
            border-radius: 5px;
        }
    }
}

HTML :

            <aside class="filter">
                <div class="filter__fixed">
                    <label class="filter__filter-elements filter__filter-elements--all"><input class="filter__filter-radio" type="radio" name="filter" checked>Wszystkie</label>
                    <label class="filter__filter-elements filter__filter-elements--web-pages"><input class="filter__filter-radio" type="radio" name="filter">Strony WWW</label>
                    <label class="filter__filter-elements filter__filter-elements--seo"><input class="filter__filter-radio" type="radio" name="filter">SEO</label>
                    <label class="filter__filter-elements filter__filter-elements--ux-ui-design"><input class="filter__filter-radio" type="radio" name="filter">Projektowanie Stron WWW</label>
                    <label class="filter__filter-elements filter__filter-elements--web-shops"><input class="filter__filter-radio" type="radio" name="filter">Sklepy Internetowe</label>
                    <label class="filter__filter-elements filter__filter-elements--landing-page"><input class="filter__filter-radio" type="radio" name="filter">Landing Page</label>
                </div>
            </aside>

I jeszcze jedno. Problem mam z kodem Sass, źle wcześniej grafiki wstawiłem. Powinny byś wstawione na odwrót.

Jeśli chodzi o to co mi nie działa to chciałem zrobić tak, że jeśli któreś z radio o klasie filter_filter-radio jest zaznaczony to żeby jego label o klasie filter_filter-elements zmienił swój background-color na biały, dostał border 1px solid i border-rudius 5px. A tak się nie dzieje, dlatego proszę o pomoc.

Piotr Kułakowski napisał(a):

chciałem zrobić tak, że jeśli któreś z radio o klasie filter_filter-radio jest zaznaczony to żeby jego label o klasie filter_filter-elements zmienił swój background-color na biały, dostał border 1px solid i border-rudius 5px. A tak się nie dzieje, dlatego proszę o pomoc.

Współczesny CSS pozwala wpływać jedynie na elementy występujące w kodzie PO elemencie, który łapiesz selektorem i uzależniasz wygląd kolejnych od jego stanu. Więc musisz je przestawić, a później przywrócić żądaną kolejność np. za pomocą order.

Obczaj najpierw, jak działa CSS zanim się weźmiesz za SASS i inne wynalazki.

p.s. Widzę, że wrzuciłeś tag INPUT do wnętrza LABLE. Stylu nadrzędnego elementu też nie da się modyfikować w zależności od stanu dziecka. Więc, j.w.
https://www.w3schools.com/tags/tag_label.asp

BTW te podkreślenia i podwójne myślniki wyglądają paskudnie.

[edit]
Ciągnąc poboczny wątek (abstrahując od ewentualnej niepoprawności Twojego html i css):

            <aside class="filter">
                <div class="element-container">
                    <label class="all">
                        <input type="radio" name="filter" checked>
                        Wszystkie
                    </label>
                    <label id="web-pages">
                        <input type="radio" name="filter">
                        Strony WWW
                    </label>
                    <label id="seo">
                        <input type="radio" name="filter">
                        SEO
                    </label>
                    <label id="ux-ui-design">
                        <input type="radio" name="filter">
                        Projektowanie Stron WWW
                    </label>
                    <label id="web-shops">
                        <input type="radio" name="filter">
                        Sklepy Internetowe
                    </label>
                    <label id="landing-page">
                        <input type="radio" name="filter">
                        Landing Page
                    </label>
                </div>
            </aside>

.filter {
    background-color: $main_bg_color;
    @include position(relative);
    height: auto;
    flex-basis: 16%;
    border-radius: 5px;
    z-index: 3;
    margin-right: 5px;

    .element-container {
        display: flex;
        flex-direction: column;
        @include position(fixed);
        padding: 10px;
        width: 16%;

        > input[name=filter] {
            margin-right: 10px;

            &:checked {
                background-color: #fff;
                border: 1px solid #000;
                border-radius: 5px;
            }
        }

        > label {
            margin: 5px;
            background-color: $main_bg_color;
            border: none;
            padding: 5px;
            font-size: 16px;
            transition: 0.4s;

            &:hover {
                background: #fff;
                border-radius: 5px;
            }
        }
    }
}

ŁF napisał(a):

BTW te podkreślenia i podwójne myślniki wyglądają paskudnie.

Też tak uważam, ale takie właśnie koszmarnie przegadane zapisy zaleca jedna z obecnych metodologii CSS.
Ale jak dla mnie to wracanie innymi drzwiami do zupa-kodu z czasów przed CSS-em.