A CSS selector is the part of a CSS ruleset that actually selects the content you want to style. Different types of selectors are listed below.
1. Universal Selector: The universal selector works like a wildcard character, selecting all elements on a page. In the given example, the provided styles will get applied to all the elements on the page.
2. Element Type Selector: This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get applied to all the ul elements on the page.
3. ID Selector: This selector matches any HTML element that has an ID attribute with the same value as that of the selector. the provided styles will get applied to all the elements having ID as a container on the page.
4. Class Selector: The class selector also matches all elements on the page that have their class attribute set to the same value as the class. the provided styles will get applied to all the elements having ID as the box on the page.
5. Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.
6. Child Combinator: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.
7. General Sibling Combinator: A selector that uses a general sibling combinator to match elements based on sibling relationships. The selected elements are beside each other in the HTML.
8. Adjacent Sibling Combinator: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.
9. Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets.