Chaining CSS Classes - Inheritance & Overriding
Slično kao kod objektnih programskih jezika tako i CSS klase mogu imati inheritance (nasljeđivanje) i overriding.Nasljeđivanje je značajka da se svojstvo parent klase prenosi na child klasu.
Pri tome je sintaxa npr. <p class="parent child">
.a {
color:blue;
}
.b {
font: 25px Arial;
text-decoration: underline;
}See the Pen CSS - Inheritance by Saša Mikodanić (@smikodanic) on CodePen.
U donjem primjeru vidimo kako je 'color' svojsvto klase b overridalo svojstvo 'color' klase a.
<p class="a b">neki tekst čćžšđ</p>See the Pen Ckvrw by Saša Mikodanić (@smikodanic) on CodePen.
Ako pak želimo da ne dođe do override-a onda ćemo upotrijebiti !important. Dakle, !important određuje koje će se svojstvo upotrijebiti prilikom nasljeđivanja CSS klasa.
See the Pen CSS - Inheritance & overriding with !important by Saša Mikodanić (@smikodanic) on CodePen.
Chaining selectors
Kod CSS-a je moguće ulančavati njegove selektore.Npr. ulančavanje id i class selektora će izgledati ovako: #mojid.mojaklasa
I to kaže da selektira sve tagove koji imaju id="mojid" i class="mojaklasa".
#mojid {
color: red;
}
.mojaklasa {
color:green;
}
#mojid.mojaklasa {
color: blue;
}See the Pen CSS - Chain id and class selector by Saša Mikodanić (@smikodanic) on CodePen.
Chaining class selectors
Na sličan način se mogu ulančavati i dva class selektora: .klasa1.klasa2See the Pen CSS - Chaining of two class selectors by Saša Mikodanić (@smikodanic) on CodePen.
Važno je primjetiti da ukoliko napišemo razmak, npr. .klasa1 .klasa2 onda će se selektirati svaki tag koji ima .klasa2 i koji je unutar .klasa1. Drugim riječima selektirat će descedent (nasljednik) HTML tagove.
See the Pen CSS - Descendant class selector by Saša Mikodanić (@smikodanic) on CodePen.
I na kraju jedan složeniji slučaj:
See the Pen CSS - Complex selector by Saša Mikodanić (@smikodanic) on CodePen.