11. What characters are used to construct selectors in CSS?

• Space (" "): selects descendant elements.
• " > " (greater-than): selects direct children.
• " + " (plus): selects the first sibling.
• " ~ " (tilde): selects all siblings.
• " # " (hash): identifies an element by ID.
• " . " (dot): identifies elements by class.
• " : " (colon): pseudo-classes.
• " , " (comma): groups selectors.
• " * " (asterisk): selects all elements.
• Selector conjunction: more precise selection of elements.

/* Examples */
div p { /* Space - selects all <p> inside <div> */
    color: red;
}

div > p { /* Selects direct children <p> inside <div> */
    color: blue;
}

h2 + p { /* Selects the first <p> element directly after <h2> */
    color: green;
}

h2 ~ p { /* Selects all <p> elements after <h2> */
    color: orange;
}

#myId { /* Selects the element with id="myId" */
    color: purple;
}

.myClass { /* Dot - selects all elements with class "myClass" */
    color: pink;
}

a:hover { /* Colon - selects links in hover state */
    color: brown;
}

h1, h2, h3 { /* Comma - selects all <h1>, <h2>, <h3> */
    color: gray;
}

* { /* Asterisk - selects all elements */
    margin: 0;
}

div.button { /* Selector conjunction - selects <div> elements with class "button" */
    background-color: yellow;
}