In CSS, selectors specify which HTML elements on your web pages should be styled.

A CSS selector can consist of an HTML element name, class selectors (.), ID selectors (#), attribute selectors ([]), pseudo-classes (:), pseudo-elements (::), and combinators (such as space, >, +, ~).

CSS Selectors

A CSS selector is the first part of a CSS Rule.

There are mainly 5 types of css selectors:

• Basic selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

Basic Selectors

Universal Selector (*): Selects all elements on the page and applies the same style universally. For example, setting the font color for every element.

Element Selector: Targets all elements of a specific type, such as paragraphs or headers. For example, setting a common font size for all paragraphs.

Class Selector (.):Applies styles to elements with a specific class attribute. For instance, making all buttons have a blue background.

ID Selector (#):Styles a single element identified by its unique id. For example, changing the background color of a header.

Combinator Selectors

Descendant Selectors:Targets an element inside another, such as paragraphs inside div .For example, styling paragraphs inside a div.

Child Selector (>):They only affects the direct child elements of a parent. For example, styling direct children paragraphs of a div.

Adjacent Sibling Selector (+):Styles an element immediately following another .For example, making the first paragraph bold after an h1.

General Sibling Selector (~):Styles all siblings that follow a specific element. For example, italicizing all paragraphs following an h1.

Attribute Selectors

Presence Selector:It selects elements that contain a specific attribute. For example, styling all inputs with a type attribute.

Attribute Value Selector:It targets elements with a particular attribute value. For example, styling text inputs.

Substring Matching(^=):It matches elements where the attribute contains a substring. For example, styling links with https in their href.

Wildcard Selector (*=):Matches elements where the attribute value contains a specific string. For example, underlining links with example in the URL.

Pseudo-Classes

:hover:Styles elements when the user hovers over them. For example, changing the color of a link when hovered.

:focus:Styles the elements when the user focus on any particular element.

:first-child:Styles the element which is the first child of it's parent.

:last-child:Style's the element which is the last child of it's parent.

:not:Helps to remove a particular element from the styling index or styling context.

Pseudo-Elements

::before:It helps to insert some content before an element.

::after:Ithelp's to insert some content after an element.

::first-line:Styles the first line of text within a block element. Line breaks mark the beginning of a new line.

::first-letter:It Styles the first-letter of a word or a sentence.

::placeholder:Styles the placeholder of a specific input field.