HTML & CSS pre začiatočníkov (časť 26): Ako získať prístup pomocou selektorov (1)

Selektory určujú, spôsob, akým sa štýly CSS priradzujú k HTML elementom. Pri príslušnom definovaní sa najskôr uvedie názov elementu, na ktorý má selektor aplikovať. Samotná deklarácia sa potom vykonáva v zložených zátvorkách. V rámci jednej deklarácie možno uviesť jednu alebo viacero vlastností. Všeobecná syntax teda vyzerá nasledovne:

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

Príslušná definícia vám už v predchádzajúcom tutoriáli vyšla naproti.

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

Je dôležité, aby ste každú deklaráciu ukončili bodkočiarkou.

Pohľad na dostupné selektory

V skutočnosti CSS ponúka pomerne veľké množstvo selektorov, z ktorých vám predstavím tie najdôležitejšie. Pretože je jasné: Len ak ovládate prácu so selektormi, môžete rozumne definovať vlastnosti CSS.

Najjednoduchší spôsob pridelenia štýlov vnútri HTML dokumentov ponúka selektor elementu.

Pomocou nasledujúcej syntaxe sa všetkým prvkom p priradí farba čierna.

p { 
   color: #009966; 
}

Ak chcete priradiť rovnaký štýl viacerým prvkom, je to tiež možné.

V tomto prípade jednoducho napíšete dotknuté prvky za sebou, oddelené čiarkou.

p, h1,  li { 
   color: #000; 
}

Môžete priradiť prvkom aj viacero štýlov. Jednotlivé štýly sa oddelujú bodkočiarkou.

p { 
   color: #000; 
   background-color: red;
}

Taktiež je možné kombinovať uvedené varianty.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Výsledok by mohol vyzerať takto:

Oblasť so viacerými prvkami

Často je potrebné formátovať oblasť, ktorá pozostáva z viacerých HTML prvkov. Pre takéto prípady HTML poskytuje špeciálne prvky span a div. Tieto prvky vám – mimochodom aj v tejto sérii – budú stále známe.

Príklad:

<div class="artikel">
  <h1>Farbexplosion</h1>
  <p class="thema">Tutorial na vytvorenie farbexplosie od <span class="autor">MarkusMelzer</span>.</p>
</div>

Jediný rozdiel medzi div a span spočíva v tom, že prvok div vynucuje nový riadok v texte. Naopak span nerobí nový riadok. V uvedenom príklade je definovaná div oblasť, v ktorej sa nachádza nadpis a odstavec textu. V rámci tohto odseku odstavca existuje oblasť span.

ID a triedové selektory

Doteraz boli použité selektory prvkov. V nasledujúcom príklade budú všetky nadpisy h1 formátované prostredníctvom takéhoto selektora.

h1 { 
   color: #000; 
   background-color: red;
}

Takto to však nie je vždy žiadané. Čo napríklad, ak chcete priradiť určité vlastnosti len jednému alebo niekoľkým, ale nie všetkým nadpisom h1? Na takéto prípady ponúka CSS dve možnosti, a to triedové a ID selektory.

Pomocou triedových selektorov možno vybrať HTML prvky s triedovými atribútmi veľmi presne. V príslušnom HTML prvku musí byť uvedený atribút class. Definície tried začínajú bodkou.

Príklad:

.rot { 
   color: red; 
}

Tu bola definovaná trieda rot. Pre pridanie vlastnosti priradených k červenej do HTML prvku sa uvedie class nasledované názvom triedy.

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

ID selektor sa dá použiť rovnako jednoducho. ID selektor sa spozná podľa dvojitého kríža.

#topnavi { 
   color: blue; 
};

V tomto príklade je definované ID topnavi. Ale pozor: Jedno ID môže byť skutočne priradené iba raz v rámci dokumentu. Prístup k definovanej vlastnosti ID vyzerá nasledovne:

<div id="topnavi">Tu je navigácia</div>

Atribútu id sa priradí názov ID. Dajte si pozor, aby tu nebol uvedený symbol krížika.





Zobrazené informácie je možné kombinovať aj medzi sebou. Napríklad HTML elementu je možné priradiť viacero tried.

<p class="červený veľký">PSD-Tutorials.de</p>

V tomto príklade sú textovému odstavcu priradené dve triedy červený a veľký. Ak chcete špecifikovať triedu a ID, vyzerá to nasledovne:

<p class="červený" id="navigácia">PSD-Tutorials.de</p>

Taktiež je možné kombinovať prvky a ID. Tu je príklad:

div.navigácia { 
   farba: modrá; 
}

Táto syntax sa vzťahuje výlučne na elementy div s triedou navigácia. Odstavce p, ktoré taktiež majú triedu navigácia, na toto nebudú mať vplyv.

V CSS existuje ďalší spôsob kombinovania selektorov. Pozrite sa na túto syntax:

h1 { 
   farba: červená;
}
em { 
   farba: modrá; 
}

Všetkým nadpisom prvého stupňa je priradená červená farba. em-elementy zase získavajú modrú farbu.

Kombináciou týchto dvoch pokynov je možné zabezpečiť, že iba em-elementy sú obarvené modrou farbou, ktoré sa nachádzajú vnútri h1-elementov.

h1 em { 
   farba: modrá; 
};

Názvy prvkov sa tu od seba oddelujú bez čiarky.

To je mimochodom populárna chybová pasca, do ktorej sa často dostávajú aj začiatočníci v CSS. Tu je tá istá syntax, v ktorej však bola pridaná čiarka:

h1, em { 
   farba: modrá; 
}

Čo znamená táto syntax? Anslečenie všetkých h1 a všetkých em-elementov. To je teda niečo úplne iné ako syntax bez čiarky!

Ďalším dôležitým selektorom je univerzálny selektor. Tento selektor umožňuje výber ľubovoľného prvku. Definuje sa cez hviezdičku.

* { 
   farba: červená; 
}

Týmto spôsobom budú všetky prvky obarvené červenou farbou. Aj pri tomto selektore je potrebné brať do úvahy niektoré špecifikácie syntaxe.

#hlavnánavigácia * { 
   farba: červená; 
}

V tomto príklade je prednastavená farba všetkých prvkov vnútri elementu s ID hlavnánavigácia červená. To sa však nevzťahuje na samotný prvok.

Ak by univerzálny selektor stál na začiatku deklarácie, nemusel by sa písať. Niečo takéto by teda bolo zbytočné:

* p { 
   farba: červená; 
}

Táto syntax je ekvivalentná s nasledovnou:

p { 
   farba: červená; 
}

V ďalšom návode sa dozviete o ďalších selektoroch.