1.4.6. Pseudo - elementy

Medzi pseudoelementy patria všetky pravidlá, ktoré sa píšu za : . Tieto pravidlá ešte viac špeicifikujú pravidlá CSS a dokážu pridávať funkcionalitu jednotlivým prvkom aj zo všeobecnejšieho výberu.

:hover, :focus, :active

:hover - definuje aké vlastnosti sa použijú po prejdení kurzorom myši nad elementom

p:hover {
    color: red;
}

a:hover {
    color: green;
}

:focus - definuje aké vlastnosti sa použijú po kliknutí myšou

p:focus {
    color: blue;
}

a:hover {
    text-decoration: underline;
}

:active - definuje aké vlastnosti sa použijú, keď je objekt aktívny, napr. vybraná aktuálna položka v menu

a:active {
    background: green;
}

:first-child, :last-child, :nth-child(číslo)

:first-child - vyberie prvého potomka alebo inak povedané prvý výskyt hľadaného elementu

:last-child - vyberie posledného potomka alebo inak povedané posledný výskyt hľadaného elementu

:nth-child(2) - vyberie druhého potomka, :nth-child(3) - vyberie tretieho potomka ....atď

<p>Tart I love candy bonbon powder brownie. Bonbon soufflé sweet roll marshmallow gummies tart carrot cake gummi bears I love. Halvah sweet roll jelly carrot cake. Biscuit oat cake topping bonbon. </p>
<p>Pudding icing I love ice cream cheesecake powder I love chocolate bar I love. Candy I love wafer cotton candy tootsie roll gummies lollipop wafer topping.</p>
<p>Tart I love candy bonbon powder brownie.</p>

Vyberie iba prvý odstavec z html a tomu nastaví červenú farbu:

p:first-child { 
    color: red;
}

Vyberie iba posledný odstavec z html a tomu nastaví zelenú farbu:

p:last-child {
    color: green;
}

Vyberie druhý odstavec z html a tomu nastaví ružové pozadie:

p:nth-child(2) {
    background-color: pink;
}