All about selectors in CSS

What are selectors?

CSS, or Cascading Style Sheets, is a design language that simplifies the process of making web pages presentable. Selectors are used to choose elements and apply styles to them.

Types of selectors

There are different categories of selectors. Each category has various types. I'll be talking about 3 categories - Basic, Combination, Attribute

1.BASIC SELECTORS

There are majorly 4 Basic Selector which are mentioned below:-

 <!-- refer this html to understand basic selector -->
    <div class="container">
        <h1>CSS Selectors</h1>
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, maiores.</h2>
        <p id="mainPara">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, corporis.</p>
    </div>

-Universal selector

It applies rules to all the elements in HTML except the pseudo-element - ::before and ::after.
(*) is used as a universal selector

* {
  font-family: "Poppins", sans-serif;
  /* font is applied to all elements */
}

-Element selector

It selects all the elements of that type

h1 {
  font-size: 3rem;
  text-align: center;
  /* this style applies to all h1 elements */
}

-Class selector

This rule is only applied to elements with the corresponding class attribute, dot (.) is prefixed to the class name in CSS.

.container {
  background-color: rgb(255, 235, 201);
  padding: 1rem;
  margin: 1rem;
  /* this style is applied to element with class container */
}

-ID selector

ID selectors are a more restrictive version of class selectors. They work in a similar fashion, except that each page can only have one element with the same ID, which means you can't reuse styles.(#) is prefixed to ID value in a CSS ID selector.

#main {
  color: rgb(117, 52, 34);
  /* this style is applied to element with ID main */
}

Output after all the above CSS

2.COMBINATIONS SELECTORS

<!-- html to understand combination of selector -->
<div class="list-container">
  <span>This is the span element</span>

  <ul>
    <li>Child 1 of ul element</li>
    <li>Child 2 of ul element</li>
  </ul>

  <ol>
    <li>Direct Child of ol element</li>
    <span>
      <li>Indirect Child of ol Element</li>
    </span>
  </ol>

  <div>This is a div </div>
  <a href="/">Link 1</a>
  <span>
    <a href="/">Link 2</a>
  </span>
  <a href="/">Link 3</a>

  <section>This is the section element</section>
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>

</div>

-AND selector

Selects element that match the specified combination

div.list-container {
  background-color: rgb(255, 235, 201);
  /* apply style to div with class list-container */
}

-OR selector

Either of the element/class, separated with comma(,)

 span, h2 {
  background-color: rgb(117, 52, 34);
  /* apply style to all span and h2 elements */
}

-Descendant selector

Selects all the child of the element
syntax: parentElement (space) childElement {}

ul li {
  background-color: orange;
  /* select all childs of ul */
}

-Direct Child selector

Selects only the direct child of the specified element
syntax: parentElement > childElement {}

ol > li {
  background-color: yellow;
  /* select the direct child of ol */
}

-All Siblings selector

Selects all the siblings (element at same level) after the first element is encountered.
syntax: firstElement ~ ssecondElement{}

div ~ a {
  color: rgb(255, 0, 0);
  /* selects only link1, link3  */
}

-Next Sibling selector

Only selects the very next/adjacent sibling to the first element
syntax: firstElement + ssecondElement{}

section + a {
  color: black;
  /* selects only link1 under section elementalign-content*/
}

Output after all the above CSS

3.ATTRIBUTE SELECTORS

<!-- html to understand attribute selector -->
<div class="list-container">
  <span type="text">This is the span element</span>

  <ul>
    <li flag="true">Child 1 of ul element</li>
    <li flag="T">Child 2 of ul element</li>
  </ul>

  <ol>
    <li data="happy">Direct Child of ol element</li>
    <span>
      <li data="hello">Indirect Child of ol Element</li>
    </span>
  </ol>

  <div data="world">This is a div </div>
  <a href="/" link="direct">Link 1</a>
  <a href="/" link="indirect">Link 2</a>
  <a href="/">Link 3</a>

-Has attribute

Selects element with the specified attribute
syntax: [attribute]{}

[type]{
  background-color: red;
}

-Exact attribute

Selects element which has the exact same attribute and value.
syntax: [attribute = "value"]{}

[flag="T"]{
  background-color:yellow;
}

-Begin attribute

Selects element whose attribute's value begins with specified text
syntax: [attribute^ = "value"]{}

[data^="h"]{
  background-color:pink;
}

-End attribute

Selects element whose attribute's value ends with specified text
syntax: [attribute$ = "value"]{}

[data$='d']{
  background-color: grey;
}

-Substring attribute

Selects element who specified text anywhere in the attribute value
syntax: [attribute* = "value"]{}

[link*="dir"]{
  background-color: blue;
  color:white;
}

Output after all the above CSS

BONUS

Some random examples to have more clarity

.container * {
/* selects everything inside container class*/
}

.c1 .c2 + .c3 {
  /* Lets break it into  2 steps 
  1. .c1 .c2 - selects all c2 class elements in c1 class element 
  2. point 1 + .c3 - selects all c3 class elements that are next sibling  of (.c1 .c2)
  */
}