0703:

Pseudoelementy

content:"" wpisujemy coś co ma się wyświetlić

element::before przed elementem, używane głównie do elementów dekoracyjnych

element::after po elemencie

.day__header::before{
    content: " - ";
}

.day__header::before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: yellow;
}

Pseudoklasy

Określają stan elementu

selektor Pseudo-classes

• hover najechanie myszką na element
• visited odwiedzone linki
• focus aktywne pole (input)
• first-child pierwszy element (dopisywany do elementu dziecka), działa tylko dla pierwszego elementu, jeśli przed nim będzie inny element nie zadziała
• last-child jak wyżej dla ostatniego dziecka
• not(selektor) negacja

.day:first-child, .day:last-child{
    background: rgb(250, 182, 182);
}

.day:hover{
    background: rgb(163, 219, 252);
}