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
Witam,
tu macie to w postaci kodu:
sass:
HTML 
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.
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.