HTML & CSS pro začátečníky (část 26): Jak provést přístup pomocí selektorů (1)

Selektory určují, jakým způsobem jsou CSS styly přidělovány HTML prvkům. Při příslušném zadání začínáme jménem prvku, na který selektor bude aplikován. Skutečná deklarace následuje v složených závorkách. Uvnitř deklarace může být uvedeno jedno nebo více vlastností. Obecná syntaxe tedy vypadá takto:

Selektor {
   Vlastnost1: Hodnota;
   Vlastnost2: Hodnota;
   Vlastnost3: Hodnota;
}

Styk, který jste již viděli v předchozím tutoriálu.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Je důležité každou deklaraci ukončit středníkem.

Přehled dostupných selektorů

CSS nabízí celou řadu selektorů, a já vám představím ty nejdůležitější. Jen pokud ovládáte práci s selektory, můžete rozvojovat CSS vern

Atributu id se přiřazuje název ID. Opatřete si, že na tomto místě se křížek neoznačuje.





Zobrazené informace je mimochodem možné také kombinovat. Tak můžete jednomu prvku HTML přiřadit například více tříd.

<p class="cervena velka">PSD-Tutorials.de</p>

V tomto příkladu jsou textovým odstavci přiřazeny dvě třídy cervena a velka. Chcete-li určit třídu a ID, vypadá to následovně:

<p class="cervena" id="navi">PSD-Tutorials.de</p>

Stejně tak můžete kombinovat prvky a ID. Opět zde máme příklad:

div.navi { 
   color: modra; 
}

Tato syntax by platila pouze pro prvky div s třídou navi. Odstavce p s třídou navi by tím nebyly ovlivněny.

V CSS existuje další způsob kombinace selektorů. Podívejte se na následující syntax:

h1 { 
   color: cervena;
}
em { 
   color: modra; 
}

Zde jsou všem nadpisům prvního řádu přiřazeny červená barva. Elementům em je naopak přidělena modrá barva.

Kombinací obou příkazů teď můžeme zajistit, že pouze elementy em budou zbarveny modře, pokud jsou obsaženy v elementech h1.

h1 em { 
   color: modra; 
};

Názvy prvků jsou zde oddělené bez čárky.

Tohle je mimochodem oblíbená past pro chyby, do kterých často nováčci v CSS padají. Zde stejná syntaxe, ve které však byla vložena čárka:

h1, em { 
   color: modra; 
}

Co tato syntaxe znamená? Jsou zde adresovány všechny h1- a všechny em-elementy. To je tedy něco zcela jiného, než syntaxe bez čárky!

Dalším důležitým selektorem je univerzální selektor. Tento umožňuje výběr libovolného prvku. Tento selektor je definován pomocí hvězdičky.

* { 
   color: cervena; 
}

Tímto způsobem by byly všechny prvky zbarveny červeně. I u tohoto selektoru je potřeba vzít v úvahu některé syntaxové zvláštnosti.

#mainnavi * { 
   color: cervena; 
}

V tomto příkladu je barva popředí všech prvků uvnitř prvku s ID mainnavi nastavena na červenou. To však neplatí pro prvek sám.

Pokud by univerzální selektor stál na začátku deklarace, nemusel by být zapsán. Pak by následující bylo zbytečné:

*





Tato syntaxe je ekvivalentní následující:



p { 
   color: cervena; 
}





Ve vašem dalším tutoriálu se dozvíte o dalších selektorech.