Kombinované definice

• společná definice
• kontextuální definice
• styl přímého potomka
• styl sourozence

Kombinované definice

• společná definice pro několik prvků

  Html elementy, třídy a identifikátory jsou odděleny čárkou např.:

  h1, h2, h3 {}   /* uvedené vlastnosti budou mít nadpisy h1, h2 i h3 */
  #menu, #obsah {}/* uvedené vlastnosti budou mít bloky menu i obsah  */

• kontextuální definice

  Definice stylu prvku, který je uvnitř jiného prvku.

  Prvky jsou odděleny mezerou, např.:

  p a {}         /* styl odkazu, který je uvnitř odstavce */
  #menu a {}     /* styl odkazu uvnitř bloku s id menu    */

• styl přímého potomka

  Prvek je potomkem rodičovského prvku, jestliže je vnořen přímo v něm. V definici je nejprve uveden rodič, pak znaménko > a poté potomek. Máme-li následující kód:

  <div id="obsah">
    <h1>Pyramidy </h1>
    <p>Pyramidy v Gíze jsou … </p>
    <div class="ukazka"><p>Následující obrázky ukazují … </p></div>
    <p>Tyto stavby … </p>
  </div>
  

  Nadpis (Pyramidy), první odstavec (Pyramidy v Gíze jsou …), div #ukazka a poslední odstavec (Tyto stavby …) jsou potomci divu #obsah a vzájemně to jsou sourozenci.

  Odstavec (Následující obrázky ukazují …) není potomkem divu #obsah a není sourozencem výše jmenovaných elementů. Je potomkem divu #ukazka a nemá žádné sourozence.

  #obsah > p {} /* ovlivní první a poslední odstavec */
  /* neovlivní odstavec v divu #ukazka, ten není přímým potomkem divu #obsah */
  

• styl sourozence

  Prvek je sourozencem jiného prvku, je-li na stejné úrovni vnoření.

  Oddělovač + určuje prvního následujícího sourozence

  Oddělovač ~ určuje všechny následující sourozence

  Máme-li předchozí html kód (viz styl přímého potomka), pak styl definovaný pro:

  h1 + p {} /* ovlivní pouze první odstavec */
  h1 ~ p {} /* ovlivní první a poslední odstavec */
            /* neovlivní odstavec v divu #ukazka, jelikož ten není sourozencem */