#css selectors and types.

In css, selectors are used to target the HTML elements on our web pages that we want to style. There are so many types of selectors available. In this article we'll run through the different types of great selectors, details, hope this will be more useful. let's see how they work.

1. Universal selectors :- as like a name, it will select all the elements in html page. everything in one go like header, body, footer. nothing will be escape by the universal selector.

- css styles for all elements in webpage.

Example:

/ Universal selector/

   *  {
        background-color: #a52a2a;
        color: #ffebcd;
        padding: 3%;
     }

here we have a background color in 6 digit hexadecimal code. we can also write the color names like red, green, violet, brown. but we use hex code so Brower can read it properly and this gives standardization to our web page. and the padding means spaces given by four sides.

2.Individual selectors or Type selectors :- here, we can select any element individually to give styling. Example:

/individual selector/

  . p { 
          background-color: #00ffff }

3.class selector - the class name always starts with dot [.] when we give a name to an element, all the element with same class name will be styled. it matches the element based on their class name. we can use class as much as for many times.

Example: /class selector/

   .relative class {
        background-color: #ffe4c4;
    }

4.ID selector- before selecting an id we use hash symbol [#]. id is same as the class that means when we give an element id it will matches with the same id value, and it gets styled with that. id denotes the uniqueness. Example:

  /*id selector*/
    #relative id {
        background-color: #663399;
        color-scheme: #fff;
        }

5.Chained selectors- there are so many ways to chain the selectors. Example; /chained selector/

        .important. text-white {
        background-color: violet;
        color: #fff;
    }

6.combined selectors:- in this we can combine two or more than two elements with the same styling. It can be written by comma [,].

Example: /combined selector/

         h1, span, p {
        background-color: red;
       }

7.inside an element: inside an element, the elements are separated by space. its starts from the parents under the parent if we put the div then it will be said that the child of it. element inside div are called as grandchild, like 'ul' or 'ol'. inside them we found 'li' that is called the grands grandchild. this will be exist in only in that sequence.

Example: /inside an element/

        form div ul li {
        list-style-type: disc;
    }

8.Direct child: in the direct child, elements are separated by ">". as per the syntax element 1 is parent ,2 is the child and 3 is the grandchild. 1should exists in that sequence as a selector.

Example: /direct child/

      form >ul>li {
        background-color: #663399;
    }

9.sibling + or adjacent sibling combinator: in this combinator the styling is applicable on the second element which is p-paragraph, so whatever will be a para after img basically on the element 2 styling will be applied. and it is the next immediate one.

let's see an example,

  img + p {
             font-weight: bold;
          }

here, paragraph [p] comes immediately after any image.

10.Pseudo selectors:- : : before and : : after

the : : before selector is a pseudo-class that allows you to add content before a selected element. this is an inline element.

syntax

              : : before

Example:-

       .ribbon ::before {
           content: write here something;
           background-color: #ffa500;
           border-color: black;
           border-style: dotted;
    }

the : : after:- this pseudo selector allows you to add content after the selected element.

syntax

          : : after

Example:-

           .ribbon :: after {
           content: write here something;
           background-color: #952cc2;
           display: inline-block;
           width: 12 px;
           height: 12 px;
        }

hope, this will be helpful to you!