There are many different types of selectors that can be used to target specific elements on a webpage. Some common types of selectors include:
| Selector | Description |
|---|---|
| Universal | Target all elements on a webpage. The universal selector is represented by an asterisk (*). For example, * would target all elements on the page. |
| Element type | Target elements based on their type, such as p for paragraph elements, a for anchor elements, or div for division elements. |
| Class | Target elements based on their class attribute. To use a class selector, you place a period (.) before the class name. For example, .main-title would target all elements with the class main-title. |
| ID | Target elements based on their ID attribute. To use an ID selector, you place a pound sign (#) before the ID name. For example, #intro would target the element with the ID intro. |
| Attribute | Target elements based on their attributes or attribute values. For example, you could use an attribute selector to target all a elements with a target attribute of _blank, or all input elements with a type attribute of email. |
| Pseudo-class | Target elements based on their state or position in the document. For example, you could use the :hover pseudo-class to apply styles to an element when the user's mouse is hovering over it, or the :first-child pseudo-class to apply styles to the first child element of its parent. |
|
Negation pseudo-class |
Exclude specific elements from a selection. To use a negation pseudo-class selector, you place the :not() pseudo-class and a selector within the parentheses. For example, :not(.warning) would target all elements that do not have the class warning. |
|
:empty pseudo-class |
Target elements that are empty, meaning they have no children or content. For example, p:empty would target all empty p elements. |
|
:root pseudo-class |
Target the root element of the document, which is usually the html element. For example, :root would target the html element. |
|
:target pseudo-class |
Target the element that corresponds to the current fragment identifier (i.e., the part of the URL after the # symbol) of the document. For example, if the URL of the document is http://example.com/page#section1, the :target pseudo-class would target the element with the ID section1. |
|
:enabled and :disabled pseudo class |
Target form elements that are enabled or disabled, respectively. For example, input:enabled would target all enabled input elements, while input:disabled would target all disabled input elements. |
|
:checked pseudo-class |
Target form elements that are checked (i.e., selected). For example, |
Selectors can also be combined to create more specific targets. For example, you could use the h1.main-title selector to target h1 elements with the class main-title, or the #intro a selector to target anchor elements within the element with the ID intro.