1. What is Selector in CSS?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

Example

h1 {
  color: blue;
}

.special {
  color: blue;
}

2.Type of the selectors.

Basic Selectors

• Universal Selector

  The asterisk (*) is known as the CSS universal selectors. It can select whole the HTML page with all types of elements. The asterisk can also be followed by a selector while used to select a child object. This selector is useful when we want to select all the elements on the page.

Example

* {
   margin: 0;
   padding: 0;
    text-align: center;
}

• Element Selector

  SelectorThe element selector selects HTML elements based on the element name (or tag) i.e p, h(1-6), div, span, etc.

Example

h1 {
    background: red;
    color: white;
}

• Class Selector

  The class selector is a way to select all of the elements with the specified class name belonging to a particular attribute and apply styles to each of the matching elements.

Example

.select{
    font-size: 12px;
    background: springgreen;
    color:#130e0e;
}

• ID Selector

  The Id selector is a way to select only the element with the specified id and apply styles to that element. It is unique on a page and can only apply to at most one element. To use an Id selector in CSS, you simply write a hashtag (#) followed by the ID of the element.

Example

#selector{
    color: black;
    background: yellow;
    font-family: Arial, Helvetica, sans-serif;
}

Grouping selector

• Selector list.

  The , selector is a grouping method that selects multiple selectors and can give them properties at the same time.

Example

p, span, .button {
  background-color: rgb(16, 16, 150);
  color: #fff;
}

Combinators

• Descendant combinator

  It is represented by a single “ ”(space) character which helps to select an element nested inside tags.

Example

div span {
  background-color: #2023d6;
}

• Child combinator

  It is represented by > which selects an element or more than one element which is are direct children of the first element.

Example

ul > li {
  margin: 10px;
}

• General sibling combinator combinator

  It selects all elements that are next siblings of a specified element and are children of the same parent element. It is represented by ~.

Example

.element ~ p {
  background-color: green;
}

• Adjacent sibling combinator combinator

  It is represented by + which is used to select an element present after + which immediately follows the element present before +.

Example

element + p {
  background-color: green;
}

Pseudo classes

• :root

  It represents an element that is the root of the document basically the html element. Here one can create css variables to store any value such as color, border, size, etc. To access these variables one have to use var(variable-name).

Example

:root {
  --primary-color: rgb(219, 47, 56);
}
div {
  background-color: var(--primary-color);
}

• :hover

  It does various effects as stated when the mouse cursor is hovered over a target element.

  Example

  button:hover {
  cursor: pointer;
  background-color: rgb(102, 116, 141);
  }
  

• :focus

  It applies the required styling as stated when the target element gets focused.

Example

input:focus {
  background-color: #b49ebe;
  border: 3px solid #7c6686;
}

• :active

  It is applied when we add styling to the target element in its active state i.e. when an action is performed on it like clicking.

Example

button:active {
  background-color: #0f1f11;
  transform: scale(0.7);
}

:enabled :disabled

Represents a user interface element that is in an enabled or disabled state.

Example

input:disabled {
  cursor: not-allowed;
}

• :first-child

  It will select the first specified element in the document and applies the required styling.

Example

li:first-child {
  margin: 10px;
  background-color: #42a192;
}

• :last-child

  It will select the last one of the specified element in the document and applies the required styling.

Example

li:last-child {
  margin: 10px;
  background-color: #42a192;
}

• :nth-child

  It is used to style some specific elements that follows a particular mathematical order.

Example

li:nth-child(-n+3) {
  margin-bottom: 1px;
  border: 2px solid #7c5306;
}

Pseudo elements

• ::before ::after

  They are often used to add cosmetic content to the first child of the selected element with the content property. They are inline by default. ::before is used to add content before the element and ::after is used to add content after the element.

Example

HTML
 <p>Quotes</p>
CSS

p::before {
  content: "« Some";
  color: blue;
}

p::after {
  content: "here »";
  color: red;
}

• ::selection

  This is used to change the style of the selected text.

Example

p::selection {
  background-color: #b4259c;
}