introduction to css selectors

What is CSS ?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.

What is Selectors 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

These are some Selectors in CSS

Universal Selector
Type Selector
Class and Id Selector
AND Selector (chained)
Combined Selector
Inside an Element Selector
Direct child Selector
Sibling ~ or + Selector
Pseudo Classes Selector
Pseudo Elements Selector

Universal Selector

An asterisk '*' can also be followed by a selector. This is useful when you want to set a style for of all the elements of an HTML page or for all of the elements within an element of an HTML page.

Syntax:


    *{
       color:#EDBF69; /* color of all the elements should be yellow */
       background-color:#242B2E; /* Black background is set for all the elements */

    }

Type selector

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

CSS
   p {
        color: #8D3DAF;  /* color of all the elements should be purple of all p tag */
        background-color: #CAD5E2; /*Background color also will be changed of all p tag*/
       }

Class and Id Selector

The class selector selects elements with a specific class attribute. It matches all the HTML elements based on the contents of their class attribute. The . symbol, along with the class name, is used to select the desired class.

      .warning {
        background-color: #ef9323;
        color: #FFFFFF;}
      #danger {
        background-color: #e93916;
        color: #FFFFFF;
      }

AND Selector (chained)

The combined selector in CSS is used to apply the same set of CSS styles to multiple HTML elements or classes or id and selectors. We generally use this selector to avoid code duplication in the CSS. We can obtain this by separating different selectors from a space-separated comma (,).

      span,li{
        background-color:red;
      }

Inside an Element Selector

Inside and Element Selector is use to target 2 element or tags inside div or span

div ul li{background-color: #435f1;}

Direct child Selector

In CSS, the Child Combinator is placed between two selectors. The child combinator is an Arrow down (>) symbol. It is used to select an element which is a direct child of its parent. For example <div >is parent element and <p> is child element, it will select all the child <p> elements of parent <div>.

css
      div > p {
        background-color: yellow;
       }

Sibling ~ or + Selector

In CSS, the Adjacent Combinator is placed between two selectors. The adjacent combinator is a Plus (+) symbol. With the adjacent sibling selector, you can choose an element that comes right after a certain one. Elements that are siblings must have the same parent element, and the word Adjacent means Right After.

      .sibling + p {
        background-color: pink;
      }

Discord id - Gaurav Singh#4419

Introduction to CSS Selectors

Table of contents

No headings in the article.