CSS Selector

TABLE OF CONTENTS

What is CSS : t stands for Cascading Style Sheets.It determines the appearance and layout of a website. CSS, like HTML, is essential for web design. The websites would still be plain text on white backgrounds without it. That is why it is not a programming or markup language but a style sheet language.

Before starting with CSS selectors I would assume that you have some basic knowledge of HTML tags. CSS is all about targeting an element from the web page and styling it. These include the background color of the page or para or any tag, padding, styling font size or button size, hover effects, and a lot more.

CSS Selectors : CSS selectors are used to selecting elements to apply the CSS rules to the elements. Before the curly braces, selectors are the initial section of a CSS declaration.

Basic Selectors :

Universal Selector : In this selector, all the elements are targeted to apply the same CSS rules for the HTML document. It can be confined to a certain namespace or all namespaces.

eg.

  /* Universal selector */* 
  {
              background-color: #E8BD0D;
              color:  #6F00ED;
              padding: 2;
          }

Individual Selector : In this selector, elements are targeted by the given tag name. This direct approach of giving styles to tags help to modify the HTML files on the webpage.

eg.

/* Individual selector */
 p {
            background-color: #fff;
        }

Class and ID Selectors : In this selector, you can target all elements with a class name given in the opening tag. To apply the style in the targeted class name. such as class="sample" in the HTML opening tag required.

eg.

  /* class selector */

          .rating1{
              background-color: #538FFB;
          }

  /* ID selector */
          #rating_id{

              background-color:#CAD5E2;
              color: #0D0D0D;
          }

Chained Selectors : In this selector, you can target multiple class names and provide the same style property and value. To chain the multiple classes, use . before the class name and after that , between the class names.

eg.

/* Chained selector */
        .success.text-white {
            background-color: green;
            color: black;
      }

Combined Selector : In this selector, you can apply the same set of styles to the targeted HTML elements, classes, and id selectors. Using this selector helps us to avoid the repetition of CSS code.

eg.
```
  /* Combined Selector */
          h1, span {
              background-color:  #E1A2B8;
          }
```
Direct Child : In a direct child, element names are separated by “>” which defines its hierarchy. As per syntax element1 is the parent, element2 is the child and element3 is the grandchild. It should exist in that sequence only as selected.

eg.

 /* Direct child or child */
        form > ul > li {
            background-color: #fff;
        }

Sibling Selector : In this selector, you can apply the same set of styles to the target second element that comes after the specified element. For siblings, we can use + (Adjacent) which targets the next single sibling and ~ (General) which targets all sibling elements.

eg.
```
  /* Sibling Selectors */
          ul + p {
              background-color: #35BDD0;
          }
```
Pseudo Classes : Now let's learn about Pseudo classes.
::before

It is usually used to add content before any element. So wherever we have used span element before that Test is added.

/* Pseudo classes - Before  */
        span::before{
            content: "Test ";

        }

::after

After the element style properties will be added. Here it's after the p tag.

COPY

/* Pseudo classes - After  */
        p::after{
            background-color: blue;
            content: "Dummy";
            color: #CAD5E2;
        }

CSS Selector

Learn about CSS and CSS selectors.