Zmiana koloru przycisku, jeśli ma klasę "active"

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: może więc warto poczytać o selektorach w CSS - jak działają, jak się odwzorowują na HTML, ich hierarchia, same zasady kaskadowości itp.

@rafal95p: Jesteś pewien że nie potrzebujesz np :active oraz :hover?

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

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.

A jak będziesz mieć 2 buttony o różnym stylowaniu?
To nie o to chodzi. Chodzi o semantykę i dostępność. Warto się uczyć dobrych wzorców a nie wszystko na div i span opierać.

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:

• ma pseudo selektor :active
• ma lepsze accessibility, bo wszelkie czytniki umieją go rozpoznać
• łapie Focus, przez co można zmieniać kontrolki używając np Tab i innymi klawiszami klawiatury
• semantycznie jest odpowiedni - div to nie jest coś co powinieneś klikać

Te 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.