• Box model
    •
  • Position
    •
  • Display
    •
  • Pseudo
    •

    Pseudo-elements

    Pseudo-elementy v CSS jsou klíčovými slovy přidávanými k selektorům, které umožňují stylizovat konkrétní části vybraného prvku.

    Rozdělení

    Třídy (:)
    Elementy (::)

    Třídy

    :hover

    Vybere prvek, když je kurzor myši nad ním.
    Příklad
    CSS
    a:hover {
        color: blue;
        text-decoration: underline;
    }

    :active

    Vybere prvek v okamžiku, kdy je na něj kliknuto.
    Příklad
    CSS
    button:active {
        background-color: #ff0000;
    }

    :focus

    Vybere prvek, když je na něj zaměřeno (např. při použití klávesnice).
    Příklad
    CSS
    input:focus {
        border: 2px solid #00ff00;
    }

    :nth-child(n)

    Vybere n-tého potomka daného rodiče.
    Příklad
    CSS
    table tr:nth-child(odd) {
        background-color: #f0f0f0;
    }

    :not(selector)

    Vybere prvky, které neodpovídají zadanému selektoru.
    Příklad
    CSS
    p:not(.special) {
        font-style: italic;
    }

    Elementy

    ::first-line

    Stylizace prvního řádku textu.
    Příklad
    CSS
    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }

    ::first-letter

    Stylizace prvního písmene textu.
    Příklad
    CSS
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }

    ::before

    Vložení obsahu před nadpisem.
    Příklad
    CSS
    h1::before {
        content: url(smiley.gif);
    }

    ::after

    Vložení obsahu za obsahem vybraného prvku.
    Příklad
    CSS
    /* Přidává ikonu za odkazem */
    a::after {
        content: "\f105"; /* Unicode kód pro ikonu */
        font-family: FontAwesome; /* Příklad použití ikonové písma */
        margin-left: 5px; /* Vytvoří mezeru mezi obsahem odkazu a ikonou */
    }