Shobhan's blog
Select like a pro with CSS Selectors

Select like a pro with CSS Selectors

A detailed guide on CSS Selectors with code snippets.

Shobhan Sundar Goutam's photo
Shobhan Sundar Goutam
·

5 min read

Table of contents

Introduction

CSS selectors are used to target single/multiple HTML elements in our web pages that we want to style. It is one of the most important aspects of CSS styling. With the help of selectors, we can select one or more HTML elements and apply the necessary styling by setting various properties under those selectors.

Basic syntax

selector { 
    property: value; 
  }

Types of css selectors

Basic selectors

  • Universal Selector

    The universal selector selects all the elements on a page. It is denoted by *. Mostly, developers use it to remove browser default properties so that the website looks consistent on all browsers.

    Example:

    * {
  margin: 0;
  padding: 0;
  outline: 0;
}

  • Individual Selector

    It is also known as type or element selector. It selects the required HTML elements all over the DOM. But it in large code bases it might be troublesome, so avoiding it will be a sensible approach.

    Example:

    p {
  font-size: 30px;
  background-color: #2023d6;
}

  • Class Selector

    Helps to select all elements having the same class name defined in the class attribute of an HTML element. It is written in the CSS stylesheet with a . followed by the class name.

    Example:

    .class-selector {
  background-color: #20d62f;
  color: #d62020;
}

  • Id Selector

    Selects an element based on the value of its id attribute. There should be only one element in the document with a unique Id value. It is written in the CSS stylesheet with a # followed by the id value.

    Example:

    #id-selector {
  font-weight: 400;
  padding: 20px;
}

  • Attribute Selector

    It is used to select all the elements that have a specified attribute. It is written in the CSS stylesheet with the attributes along with its value (if any) within square brackets []. Also, we can specify the attribute with the element followed by the attribute within square brackets.

    Example:

    input[type="text"] {
  width: 70px;
  margin: 10px;
}

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 has 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 hovers 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 follow 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;
}

    These are the important ones. There are many more other than these. To know more refer CSS Selectors - MDN.

CSSWeb Development@hiteshchoudharylcoLearn Code Onlineiwritecode