[CSS]Gdy klas jest więcej...

[niekumaty]

Witam! Dopiero przełknąłem podstawy CSS i mam taki oto problem:

Ogólnie za dużo jest zagadnień by do mojej prostej stronki uczyć się wszystkiego, więc pokusiłem się o CMS.

Zanim przejdę do sedna (nie będę podawał kodu faktycznego, bo chciałbym się nauczyć a nie przypadkiem dostać gotowca ).

Powiedzmy, że mamy dwa divy

Kod:

<div id="pierwszy" class="pierwsza druga trzecia m n o"></div>
<div id="drugi" class="pierwsza druga trzecia x y z"></div>

trzy pierwsze klasy są takie same dla tych dwóch divów. Występują gdzieś tam w innych elementach, ale razem tylko w tych dwóch.
Chciałbym, żeby pod każdym z tych divów była np. pusta przestrzeń o wartości 5px

Pomyślałem, że to będzie proste:

Kod:

.pierwsza.druga.trzecia {
margin-bottom: 5px;
}

dlaczego to nie działa? I jeszcze pytanko - jeśli wybrane obiekty korzystają z często używanych klas, ale np. tylko niektóre korzystają z dwóch/trzech takich klas naraz to można to wykorzystać czy trzeba dodać im kolejną specjalną klasę?

EDIT! Dobra, jednak działa. Literówka była w przydługim zestawieniu klas :d

To jeszcze inne pytanko. W sumie jak to działa? W sensie, że dane wartości będą działały tylko gdy te trzy klasy będą użyte razem w danym obiekcie? Kolejność wpisywania ma znaczenie?

I jeszcze jedno - odstęp się pojawił, ale jest wypełniony białym kolorem - użyłem margin i w sumie tylko dłuższe się te bloki zrobiły. jak to poprawić?

EDIT 2 Dobra, wygląda na to, że kolejność nie ma znaczenia + walnąłem głupotę, bo wypełniłem cały sektor białym kolorem, więc siłą rzeczy nawet, gdy były odstępy, nie było takiej siły, żeby je zobaczyć ;d

[Kartofelek]

Ma znaczenie, jeżeli oba selektory są tej samej wagi.

Kod:

.klasa1 {color:red;}
.klasa2 {color:blue;}

Zależnie którą wstawisz do class="...." ostatnią, ta nadpisze poprzednią.
Ale:

Kod:

.klasa1 {color:red;}
.sidebar .klasa2 {color:blue;}

Jeżeli dany obiekt będzie w sidebarze, to drugi selektor jest bardziej sprecyzowany czyli ma większą wartość. Im coś jest dokładniejsze, tym ma większą moc.

W stylowaniu nie używaj setek klas na każdy div, bo to się mija z celem. Równie dobrze mógł byś w końcu walić style wewnątrz znaczników.
Twórz jakiś obiekt, opisz go dokładniej. Jeżeli jakieś cechy będą wspólne dla innych elementów (np dolny odstęp, wspólna szerokość itp), wtedy warto wynieść to w inną klasę i wtedy dodatkowo to aplikować. Dodatkowo jak dany obiekt ma mieć inne wersje, wtedy rozszerz je przez rozbudowę klasy (xxx.yyy) lub wykorzystując wspólne klasy:

Kod:

.pink {background:pink; color:black;}
.clear-space {margin-bottom:0;}

.button {....font-size....line-height.....background:green;}
.button.pink {color:red;}

.widget { bla bla bla; margin-bottom:15px;..........}
.widget.pink {color:white;}

<div class="widget"></div>
<div class="widget"></div>
<div class="widget clear-space"></div>

<a href="" class="button">xxx</a>
<a href="" class="button pink">xxx</a>

Ogólnie myślę że wychodzenie do 4 klas na jeden obiekt to już lekkie przegięcie (ale mogą być takie sytuacje!).

Poczytaj też o obiektowości w CSS i o SASS/LESS