DEV Community

Cover image for All about selectors in CSS
Anshul Raheja
Anshul Raheja

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

-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 */
}

Enter fullscreen mode Exit fullscreen mode

-Element selector

It selects all the elements of that type

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

-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 */
}
Enter fullscreen mode Exit fullscreen mode

-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 */
}
Enter fullscreen mode Exit fullscreen mode

Output after all the above CSS

Basic

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>
Enter fullscreen mode Exit fullscreen mode

-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 */
}
Enter fullscreen mode Exit fullscreen mode

-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 */
}
Enter fullscreen mode Exit fullscreen mode

-Descendant selector

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

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

-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 */
}
Enter fullscreen mode Exit fullscreen mode

-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  */
}
Enter fullscreen mode Exit fullscreen mode

-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*/
}
Enter fullscreen mode Exit fullscreen mode

Output after all the above CSS

Image2

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>
Enter fullscreen mode Exit fullscreen mode

-Has attribute

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

[type]{
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

-Exact attribute

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

[flag="T"]{
  background-color:yellow;
}
Enter fullscreen mode Exit fullscreen mode

-Begin attribute

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

[data^="h"]{
  background-color:pink;
}
Enter fullscreen mode Exit fullscreen mode

-End attribute

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

[data$='d']{
  background-color: grey;
}
Enter fullscreen mode Exit fullscreen mode

-Substring attribute

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

[link*="dir"]{
  background-color: blue;
  color:white;
}
Enter fullscreen mode Exit fullscreen mode
Output after all the above CSS

attribute

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)
  */
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)