Vnořování CSS pravidel

Docela často chceme, aby uvnitř určité konstrukce platila odlišná pravidla než ve zbytku stránky. Například budeme mít na stránce barevné bloky, uvnitř nichž se má změnit barva odkazů. Nebo se na stránce mohou vyskytovat karty produktů, ve kterých mají vypadat nadpisy a obrázky nějak specificky.

Takové nastavení v CSS řeší selektor potomka, kterým předepíšeme, jakého předka musí mít daná konstrukce, aby se na ni vztahovalo pravidlo. Třeba ty barevné bloky by mohly vypadat nějak takto:

.barevny {
    background-color: #1b4001;
    color: #f2dfce;
}

.barevny .zvyrazni {
    color: #7bc9ff;
}

.barevny a {
    color: #ffbe00;
}

.barevny a:visited {
    color: #d59f00;
}

.barevny a:hover {
    color: #1b4001;
    background-color: #ffbe00;
}

Funguje to, jen to neustálé opakování selektoru obsahujícího bloku je poněkud otravné a zavání překlepem. CSS preprocesory, jako je Sass nebo LESS, proto umožnily, aby se pravidla mohla do sebe vnořovat. Při generování CSS vnořeným pravidlům doplnily na začátek selektoru selektor jejich „obalu“. Později byla tato možnost přidána i přímo do CSS.

Vnořená pravidla

V těle pravidla se proto mohou vyskytovat nejen vlastnosti a jejich hodnoty, ale také celá vnořená pravidla. Jsou interpretována jako pravidla pro potomky, tedy jako by jejich selektor obsahoval nejprve selektor obalujícího bloku a za ním svůj vlastní.

Kompaktnější podoba výše uvedeného kódu by proto mohla začínat takto:

.barevny {
    background-color: #1b4001;
    color: #f2dfce;

    .zvyrazni {
        color: #7bc9ff;
    }
    ...
}

Prohlížeč je bude interpretovat stejně jako první dvě pravidla výše uvedeného příkladu. S následujícími vnořenými pravidly ale vznikne menší problém. Aby se jednoduše daly odlišit selektory vnořených pravidel od názvů vlastností, nesmí selektor začínat písmenem. Nelze proto vnořit pravidlo, jehož selektorem bude a.

Selektor &

Řešením tohoto problému je znak & použitý v selektoru vnořeného pravidla. Bude nahrazen selektorem obalujícího pravidla. Chcete-li definovat vzhled vnořeného prvku, zahajte selektor vnořeného pravidla &, následuje mezera a název prvku, jehož vlastnosti chcete nastavit:

.barevny {
    ...
    & a {
        color: #ffbe00;
    }
    ...
}

Mechanismus se skutečně chová jako textové nahrazení. Kdekoli použijete znak &, bude nahrazen selektorem obalujícího pravidla. Například &:hover znamená „zkopíruj selektor obalujícího pravidla a přidej za něj :hover“. Počáteční příklad s maximálním využitím vnořování by vypadal nějak takto:

.barevny {
    background-color: #1b4001;
    color: #f2dfce;

    .zvyrazni {
        color: #7bc9ff;
    }

    /* .barevny a */
    & a {
        color: #ffbe00;

        /* .barevny a:visited */
        &:visited {
            color: #d59f00;
        }

        /* .barevny a:hover */
        &:hover {
            color: #1b4001;
            background-color: #ffbe00;
        }
    }
}

Pokud selektor vnořeného pravidla neobsahuje &, vloží se na jeho začátek „& “. Jinak ne a jen se nahradí & v selektoru. To vám umožňuje dělat psí kusy:

.barevny {

    /* .clanek .barevny */
    .clanek & {
        /* pravidla se použijí pro barevný blok,
        který je potomkem prvku s třídou clanek */
    }

    /* .barevny .barevny */
    & & {
        /* barevný blok uvnitř barevného bloku */
    }
}

V zájmu svého duševního zdraví to s podobnými triky nepřehánějte.

Pozor, tohle nebude fungovat, jak byste asi chtěli:

a {
    color: #ffbe00;

    :visited {
        color: #d59f00;
    }
}

Selektor vnořeného pravidla neobsahuje &, proto se na jeho začátek přidá ampersand a mezera. Výsledný selektor bude a :visited (nikoli a:visited) a změnu barvy pravidlo uplatní na potomky prvku <a>, kteří byli navštíveni, nikoli na prvek samotný. Aby se vztahovalo přímo na navštívený prvek <a>, musí být jeho selektorem &:visited, jak jste viděli v příkladu výše.