What is a CSS Selector?

• CSS selectors are used to find the element whose property will be set.
• These are used to target the HTML elements
• For Example

  p { color : blue; }
  

• In this example, all the paragraph tags are selected and given the property of color to be blue.

Universal Selector

• The CSS universal selector (*) matches elements of any type.

Individual Selector

• Individual Selectors are used to select a specific HTML tag on which we need to apply style. We can select any element with the help of an individual selectors.

Class Selector

• Class Selector selects all elements which match the class attribute. If the attribute is given as class = "firstClass" in any HTML element, then with the help of this syntax (given below) we can select all the HTML elements having the same class name and apply the CSS property.

ID Selector

-ID Selector selects an element as per the value of its id attribute. In an HTML document, there should not be multiple id attributes.

Chained Selector

• We can target multiple classes and a combination of class and id, and then apply CSS properties to them.
• There should NOT be any spaces in CSS between the class and ID.

Combinators

• It defines the relationship between the selectors in CSS.
• There are four different combinators in CSS:
  1. descendant selector (space)
  2. child selector (>)
  3. adjacent sibling selector (+)
  4. general sibling selector (~)

Descendant Selector

• The descendant selector matches all elements that are descendants of a specified element.

Child Selector

• The child selector selects all elements that are the children of a specified element.

Adjacent Sibling Selector

• The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

General Sibling Selector

• The general sibling selector selects all elements that are next siblings of a specified element.

What are Pseudo-Elements?

• A CSS pseudo-element is used to style specified parts of an element. It can be used to style the first letter, or line, of an element or Insert content before, or after, the content of an element.
• There are two special types of pseudo-elements, which are:
  1. ::after
  2. ::before
• They are special because they are used along with the content property. The content property helps to add content either after the selected element or before as per the pseudo-element used.

::after and ::before

• It is often used to add cosmetic content to an element with the content property. It is inline by default.
• ::after adds content after the target element.
• ::before adds content before the target element.

Note

• We can have multiple classes.
• We cannot have multiple IDs.

---

Thanks for Reading