What is a Selector? In HTML, This is the element name at the start of the ruleset. It defines the element(s) to be styled. In CSS, it is called as the selector.

p{ color: red; } In this example, p is the selector color is the property red is the property value

CSS Selectors define the elements to which a set of CSS rules apply.

Types of Selectors There are many different types of selectors. Here are some of the more common types of selectors:

1. Universal Selector
2. Element Selector
3. ID Selector
4. Class Selector
5. Attribute Selector
6. Pseudo Selector

Let's get in to each of them:

1. Universal Selector: Selects all elements. Example: * will match all the elements of the document.

2. Element Selector: All HTML elements of the specified type. It is also called a type selector. Example: p selects

3. ID Selector: The element on the page with the specified ID. On a given HTML page, each id value should be unique. Example: #my-id selects

   or

4. Class Selector: The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page. Example: .my-class selects

   and

5. Attribute Selector: The element(s) on the page with the specified attribute. Example: img[src] selects but not

6. Pseudo Selector: The specified element(s), but only when in the specified state. (For example, when a cursor hovers over a link.) Example: a:hover selects , but only when the mouse pointer is hovering over the link.

Grouping Selectors Selector list: The , selector is a grouping method that selects all the matching nodes. Syntax: A, B Example: div, span will match both and

Combinators

Descendant Combinator: Selectors that utilize a descendant combinator are called descendant selectors. The descendant combinator is technically one or more CSS white space characters — the space character. Example: div span will match all elements that are inside a

Child Combinator: The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Example: ul > li will match all

elements that are nested directly inside a

element.

General sibling combinator: The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element. Example: p ~ span will match all elements that follow a

, immediately or not.

Adjacent sibling combinator: The + combinator matches the second element only if it immediately follows the first element. Example: h2 + p will match the first

element that immediately follow an element h2.

Column combinator: The || combinator selects nodes which belong to a column.
Example: col || td will match all elements that belong to the scope of the .

Pseudo-classes and pseudo elements

Pseudo-classes: The : pseudo allow the selection of elements based on state information that is not contained in the document tree. Example: a:visited will match all elements that have been visited by the user.

Pseudo elements: The :: pseudo represent entities that are not included in HTML. Example: p::first-line will match the first line of all

elements.