Załóżmy, że tak stylizuję jakiś button:
.menuButtonInActive {
color: red;
height: 10px;
width: 20px;
}
Chcę teraz zmienić kolor po kliknięcu:
.menuButtonActive {
color: blue;
height: 10px;
width: 20px;
}
Czy można zrobić tak:
.menuButtonActive inherits from menuButtonInActive {
color: blue;
}
Chodzi o niepowtarzanie linijek kodu CSS.
Nie można. Można za to nauczyć się scss i tam masz np coś takiego https://sass-lang.com/documentation/at-rules/extend
w tym przypadku raczej nie jest nawet potrzebne SCSS, bo i dziedziczenie nie jest potrzebne
Jeden element może mieć kilka klas naraz.
Nie ma potrzeby powtarzać całej definicji dla aktywnego buttona i nieaktywnego po prostu robisz główna klasę i jakieś modtfikatory np.
.menuButton {
height: 10px;
width: 20px;
color: red;
}
.menuButton.active {
color: blue;
}
I wtedy
<button class="menuButton active">klik</button>
Albo za pomocą JS dodajesz klasę active do danego przycisku
Nie sądziłem, że:
.active
będzie interpretowane jako
[spacja]active
W każdym razie działa.
@rafal95p: Jesteś pewien że nie potrzebujesz np :active oraz :hover?
W tym przypadku rolę przycisku pełni DIV. Czyli tryb active/inactive wpływa tylko na jego background-color.
rafal95p napisał(a):
W tym przypadku rolę przycisku pełni DIV. Czyli tryb active/inactive wpływa tylko na jego background-color.
A jest jakiś powód czemu to jest <div>, a nie <button>?
Przycisk też możesz dowolnie ostylować, tak żeby wygląd był taki sam jak tego diva.
Dobre pytanie tj. co mi da button zamiast div.
Button można "kliknąć" z klawiatury, osoby niewidome lub z upośledzeniem wzroku będą poinformowane przez specjalne oprogramowanie, że coś jest klikalne.
Czyli tzw "dostępność", bez tego Twoja strona nie jest dostępna dla wszystkich. Jeżeli jest to strona publiczna to np. Google może zepchnąć ją w dół w wynikach, bo promuje strony dostępne dla wszystkich.
rafal95p napisał(a):
Dobre pytanie tj. co mi da button zamiast div.
Odpowiem sam sobie. Używając elementu typu button nie muszę deklarować nowej klasy. Wystarczy w arkuszu CSS złapać button i tyle.
rafal95p napisał(a):
rafal95p napisał(a):
Dobre pytanie tj. co mi da button zamiast div.
Odpowiem sam sobie. Używając elementu typu button nie muszę deklarować nowej klasy. Wystarczy w arkuszu CSS złapać button i tyle.
Znaczy, akurat ten powód to jest średni.
Czemu wybrać button zamiast div:
:activeTe same zalety ma również <a>.
Twój powód, czyli "selektor button zamiast nowa klasa", to jest zły pomysł bo i tak temu przyciskowi powinieneś nadać osobną klasę, zamiast nadawać takie same style wszystkim przyciskom.
.foo.bar { color: red; }. Bo już.foo .bar { color: red; }będzie oznaczać zagnieżdżenie elementu o klasie bar gdzieś w środku elementu o klasie foo..active.menuButtoni będzie też łapać nawet jak w HTML masz odwrotnie.