Tvorba webu » CSS » Class, id, kontextové selektory, dědičnost

Class, id, kontextové selektory, dědičnost

Pokud chcete jeden element stylovat více styly, můžete využít například třídu (class) nebo identifikátor (id).

V praxi se to často využívá například tehdy, když chcete stylovat odstavce p: barvu nastavíte na černou, ale jeden odstavec potřebujete mít červený.

p {
color: Black;
}
p.cervena {
color: Red;
}

Předchozí stylopis zajistí, že každý odstavec bude zobrazen černým písmem a odstavce s třídou cervena (p class="cervena") se zobrazí červeně.

Podobným způsobem lze využít identifikátor (id), jen s tím rozdílem, že stylový předpis se musí trochu upravit. Pamatujte však, že identifikátor s určitou hodnotou může být na stránce jen jednou.

.normal {
color : Black;
}
#modra {
color : blue;
}

V předchozím příkladu jsou zapsány jen třída a selektor. Pomocí nich můžete styl připojit k libovolnému elementu, například k p, h1–h6, div nebo span. Stačí k elementu přidat třídu nebo identifikátor s příslušnou hodnotou (class="normal", id="modra").

Kontextové selektory

Pokud je potřeba nastavit jinou vlastnost elementu, který je uvnitř určitého elementu, použijí se kontextové selektory. Pokud bude element p uvnitř elementu div, zformátuje se pomocí následujícího stylového předpisu.

div p {
color : gold;
background-color : Black;
}

Dědičnost

Dědičnost si vysvětlíme na následujícím příkladu. Když do hlavního nadpisu vložíme element a (odkaz), odkaz zdědí po hlavním nadpisu vlastnosti, které nemá sám nastavené.

h1{
color : Orange;
background-color : Black;
font-family : Arial, Helvetica, sans-serif;
font-size : 150%;
}

Předpokládejme kód:

<h1>Nadpis s <a href="nekam.html">odkazem</a></h1>

Odkaz tedy zdědí po nadpisu velikost, barvu pozadí a rodinu písma. Barva textu odkazu však bude jiná, i když ji v CSS nenastavíme.

Pokud budete chtít například celému dokumentu nastavit stejné písmo, nastavte ho elementu body. Styl pak zdědí všechny ostatní elementy, protože jsou umístěny uvnitř elementu body.

Kde má styl vyšší váhu

Pokud máte ve stylovém předpisu stejný styl zapsaný několikrát, vyšší váhu má později zapsaný styl (tedy styl níže v kódu).

Pokud budete chtít, aby měl nějaký styl větší váhu než ostatní, jednoduše za něj přidáte !important. Styl pak bude mít vyšší váhu a nebude záležet ani na tom, zda byl zapsán později.

Reklama