CSS Selectors in detail

Hello everyone, This is my second article here which is mainly about CSS Selectors in detail. So first let's grab what are CSS selectors actually:

#What are CSS Selectors?

Selectors are the part of CSS rule set. A CSS Selector 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. CSS selectors select HTML elements according to their id, class, type, attribute, etc. In Simple, CSS selectors are used to select the content you want to style

Types of CSS Selectors

There are several different types of selectors in CSS:-

• CSS Individual Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
• CSS Chain Selector
• CSS Inside an Element Selector
• CSS Combinators
• CSS Direct Selector
• CSS Sibling Selector
• CSS Pseudo Selector

Let's get started with-

Individual Selector [ p , h1...]

The element selector is a way to select all the elements with a given tag name in a document and apply the same styles to each element with that specific tag name.

Example

    p{ color: green }

Id Selector[#]

The id Selector uses the id attribute of an HTML element to select the specific element, the id of an element is unique on the web page due to with it can only be assigned to only one HTML element.

Example

    #top { background-color: black }

Class Selector[.]

The .class Selector selects elements with a specific class attribute. it is denoted with a dot ( . ) with the name of the class ( .class ) .

Example

   .pink{ text-align: left
           font-weight:bold
         }

Universal Selector[*]

Universal Selector is denoted with Asterisk ( * ) . it helps us to select all the HTML elements on our web page.

Example

    * { border:2px solid black }

Group Selector [p, h1, h2]

The grouping selector selects all the HTML elements with the same style.

Example

     p,h1,h2{
             text-align: center
             color: red
             font-size:16px
      }

And or Chain Selectors

Example

        .section-1.red.pink{
                          background-color: grey        
                   } 

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all h2 elements inside div elements:

Example

      div h2{
            font-weight: bold
            }

Direct Child Selector[>]

The child selector selects all elements that are the children of a specified element. The following example selects all p elements that are children of a div element:

Example

        div > p {
               background-color: yellow;
              }

Sibling Selector [~]

The general sibling selector selects all elements that are next siblings of a specified element.

The following example selects all

elements that are next siblings of

          div + p {
                   background-color: grey;
                  }

                  a:highlight: hover {
                    color: red;
              }