11. Jakie znaki są wykorzystywane do budowania selektorów w CSS?

• Spacja (" "): wybiera elementy potomne.
• Znak ">" (greater-than): wybiera bezpośrednie potomki.
• Znak "+" (plus): wybiera pierwsze rodzeństwo.
• Znak "~" (tilde): wybiera wszystkie rodzeństwo.
• Znak "#" (hash): identyfikator elementu.
• Znak "." (kropka): klasa elementu.
• Znak ":" (dwukropek): pseudo-klasy.
• Znak "," (przecinek): łączenie selektorów.
• Znak "*" (gwiazdka): wszystkie elementy.
• Koniunkcja selektorów: bardziej precyzyjne określenie elementów.

/* Przykłady */
div p { /* Spacja - wybiera wszystkie <p> wewnątrz <div> */
    color: red;
}

div > p { /* Greater-than - wybiera bezpośrednie potomki <p> wewnątrz <div> */
    color: blue;
}

h2 + p { /* Plus - wybiera pierwszy element <p> bezpośrednio po <h2> */
    color: green;
}

h2 ~ p { /* Tilde - wybiera wszystkie elementy <p> po <h2> */
    color: orange;
}

#myId { /* Hash - wybiera element z id="myId" */
    color: purple;
}

.myClass { /* Kropka - wybiera wszystkie elementy z klasą "myClass" */
    color: pink;
}

a:hover { /* Dwukropek - wybiera linki w stanie hover */
    color: brown;
}

h1, h2, h3 { /* Przecinek - wybiera wszystkie <h1>, <h2>, <h3> */
    color: gray;
}

* { /* Gwiazdka - wybiera wszystkie elementy */
    margin: 0;
}

div.button { /* Koniunkcja selektorów - wybiera elementy <div> z klasą "button" */
    background-color: yellow;
}