Hola! Coders 👨‍💻 Hope you all are doing well, In this article, I'm going to tell, about all the CSS Selectors with code snippets and examples, "The Sorting Hat" is a character mentioned in the novel by J.K Rowling "The Harry Potter" series that decides/selects which children should go into which Hogwarts house in according to their specific attributes similarly (but not exactly), CSS Selectors selects/decides/find HTML elements with specific attributes.

By entering "Mark" into the skin through spell - Inline CSS
By distributing "Poly juice Potion" internally - Internal CSS
Externally using Our "Magic Wand" - External CSS

CSS Selectors :

Overview

The sorting hat in the Harry Potter series appears when all the Hogwarts students are going to be selected for their Hogwarts house. The Sorting Hat decides/selects

What is CSS?

The term "CSS" stands for Cascading Style Sheets, which are used to style Websites and are in charge of how landing pages appear in browser-reflective ways.

CSS is a powerful magic word that may be used to alter the "Graphical Appearance" or GUI of Web Pages without using any CLI commands.
On a website, it is in charge of styling, resizing, positioning, colors, responsiveness, and more.

When we discuss a website's "Responsiveness," CSS is what makes that possible. Style switching between desktop, tablet, and mobile versions is possible with it. To know more about how it will function, "Magic that makes HTML more Handsome" please read my blog and Kindly click on read more. Read More

The Anatomy of CSS Syntax:


selector { property : value; }

Selectors

Just as in English, we have grammatical rules that state where you should put commas, where you should have full stops, which words need to be capitalized, etc., all programming languages also have their particular syntax. Now, the first thing that you'll see in the selector then pair of curly brackets inside which your CSS rules going to reside.

The selector is just the "WHO" so, it tells it the "WHO" you want to "modify" on your web page. it is <h1> , <p> , <img> whose style do you gonna change? background color, text color, and position. The next Part, for "property" is the "WHAT" like if you select <h1> as a selector then what about <h1>? do you want it blue or red? and To change it we have assigned some sort of values So, "HOW" do you want to change the background color of H1? for modifying any color or properties input we just give various values.

What are Selectors in CSS?

Selectors for CSS are a component of CSS rules. It facilitates the targeting of an HTML element on a website. A pattern, series of elements, or other terms that specify which HTML elements should be chosen so that the CSS property values contained in the rule are applied to them.

In layman's terms, it is a means to pick anything using a specified class name, id, and special symbols that are associated with a specific attribute or HTML element, then apply styles to all of the matching items.

CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, and 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)

Types of Selectors?

Basic Selector
- Universal Selector
- Element Selector
- Class Selector
- ID Selector
Grouping Selector -Selector List
Combinators
- Descendant Combinator
- Child Combinator
- General sibling combinator combinator
- Adjacent sibling combinator combinator
Pseudo classes & Elements
- root
- hover
- focus
- active
- enabled & disabled
- last-child
- nth-child
- before & after
- selection

Basic Selector

Universal Selector

The CSS universal selectors are represented by the asterisk (*). The entire HTML page with all of its elements can be chosen. The asterisk can also be used to pick a child object, followed by a selector. When we want to select every element on the page, this selector is helpful.

Example

* {
      margin: 0;
      padding: 0;
      color: #fff;
      background: #000;
}

Element Selector

Based on the "element name (or tag)", such as h(1-6), div, span, etc., the element selector chooses (or) selects (or) find (or) target the HTML elements.

Example

/*** Element Selector ***/
    h1, h3 {
      text-align:center;
    }

    img {
      border-radius:50%;
      width:400px;
    }

    b {
      color: red;
    }
 /*************************/

Class Selector

To apply styles to all of the matching elements, use the class selector to select (or) target (or) find all elements that have the supplied class name and correspond to a specific attribute.

Example


   /*** Class Selector ***/

    .HarryWithHermione {
      background-color: #000;
      color: #fff;
      text-align:center;
    }

    .HarryDanceWithHermione {
      border-radius: 50%;
      width:400px;
    }

    /****************************/

ID Selector

Using the Id selector, you can only pick and apply styles to elements that have the given id. It is exclusive to a page and only applies to one element at most.
In CSS, you only place a hashtag (#) before the element's ID to utilize an Id selector.

Example


/******* ID Selector *******/

    #bodyID {
      background-color: #000;
      color:#fff;
      text-align: center;
    }
    #hermoine {
      border-radius:50%;
      width:400px;
    }

    /****************************/

Grouping selector

Selector list

The (",") selector is a grouping mechanism that picks up several selections and can simultaneously give them properties.


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

Child combinators

It is denoted by the symbol ">" which chooses one or more elements that are the initial element's direct children.


 /*  Child Combinator */
    ul > li  {
        list-style: none; /* Remove the bullet point */
        margin: 20px;
        color: pink;
      font-weight: 800;
      font-size:24px;
}

General sibling combinator

It chooses all elements that share a parent element and are next siblings to a given element (not necessarily immediately). It is symbolized by the character '~'.


 /*  General sibling combinator  */

 .rocket > h4 ~ p  {
   color: blue;
   font-weight:800;
   font-size:24px;
   background-color: orange;
 }

Adjacent sibling combinator

It is symbolized by the symbol +, which is used to choose an element that is present after + and that comes just after the element that is present before +.

  /*  Adjacent sibling combinator  */
 .rocket > h4 + p.saffron {
   color: #FF9933;
   font-weight:800;
   font-size:24px;
   background-color: #FF9933;
 }

Pseudo-classes

: root
: root CSS pseudo-class matches the root element of a tree representing the document. In HTML, the root represents the element and is identical to the selector HTML, except that its specificity is higher.

  /*  :root  */
:root {
   --primary-color:rgb(31,170,89);
     background-color:var(--primary-color);
   font-size:18px;
 }

: hover

When the mouse cursor is over a target element, it performs different/various effects are going to start happening.

.style_prev_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   

}
.style_prev_kit:hover
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

: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.

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

:enable : disable;

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

input:enabled {
    background-color: gold;
}

input:disabled {
  cursor: not-allowed;
}

:first-child

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

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.

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

:nth-child

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

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.

p::before {
  content: "« Start »";
  color: Gree;
}

p::after {
  content: "« end »";
  color: red;
}

::selection

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

p::selection {
  background-color: orange;
}

Thank you for reading this Article.

CSS Selectors : The Sorting Hat & much more

CSS Selectors :

Overview

What is CSS?

The Anatomy of CSS Syntax:

What are Selectors in CSS?

Types of Selectors?

Basic Selector

Universal Selector

Example

Element Selector

Example

Class Selector

Example

ID Selector

Example

Grouping selector

Selector list

Pseudo-classes

Example

Pseudo-elements

Comments

More from this blog

🤖 Building an Agentic AI Job Search Assistant with LangChain, LLM, RAG, and CrewAI

🌦️ Building a Production-Ready Modular Weather Data CLI using Async APIs and MCP

Building a System to Identify Sarcasm in Hindi Twitter Posts

From Pixels to Pathways: The Magical Eyes

Python For Data Science - I

Command Palette

CSS Selectors :

Overview

What is CSS?

The Anatomy of CSS Syntax:

What are Selectors in CSS?

Types of Selectors?

Basic Selector

Universal Selector

Example

Element Selector

Example

Class Selector

Example

ID Selector

Example

Grouping selector

Selector list

Pseudo-classes

Example

Pseudo-elements

Comments

More from this blog