Selectors in CSS are used to define the elements you want to style with CSS. The selectors are what allow you to apply style to specific HTML elements. In CSS there are different types of selectors, each with their own unique syntax.
Universal Selector
The asterisk (*) is the universal selector in CSS. By default this selector target all elements in a document.
Individual Selector
Individual selectors select all elements with the specific tag name. For example, “x” would select all "x tag" elements and apply the CSS values to them. similarly “span” would select all "span tag" elements.
Class and Id Selector
To select elements with a specified class, write a period character(.), followed by the class name. we can have more than one class within a page.
To select elements with a specified id, use a hash character(#), followed by the id name.
There should be only one element with a given id within a page.
Combined(group) Selector
To group CSS selectors in a style sheet, use commas to separate multiple grouped selectors in the style. Example- div, p { color: yellow; }. In the following example, the style affects both p and div elements.
Descendant/inside an element
Pattern: x(space)y
Matches any y element that is a descendant of an x element.
Example- div ul li { color: pink; }
Direct child
Pattern: x>y
Matches any y elements that is a child of an element x.
Example- div >li { color: red;}
Sibling Selector
There are two types of sibling selector- Adjacent sibling & General sibling.
Using an adjacent sibling selector, you can select an element that is directly after another specific element.
Example- div + p {color: grey;}.This example selects the first "p" element placed immediately after a "div" element.
A general sibling selector selects all elements that are next siblings of a specified element.
Example- div ~ p {color: grey;}. This example selects all the "p" elements that are the next siblings of the "div" element.
Before Pseudo Selector
The ::before selector, is used to insert some content before the content of an element. In general, it is used for adding decorative content to an element using the content property.
After Pseudo Selector
The ::after selector, is used to insert some content after the content of an element. This selector is the same as ::before selector.
