Day 3 Web Devlopement

Many people start learning CSS just jump into the background color and giving height width to the HTML element this is the wrong way to learn CSS right way is to first learn about the right way to target the HTML element through the CSS selector.

CSS Selector

1. UNIVERSAL SELECTOR -> It will Select all elements. Optionally, it may be restricted to a specific namespace or all namespaces.

     /* Universal Selector */
            *{
                background-color: #000000;
                color: #9acd32;
            }
   

1. INDIVIDUAL SELECTOR OR TYPE SELECTOR

   As the name suggests it will select that element like we have a para in HTML.

           p{
                color: #ffffff;
             }
   

2. CLASS SELECTOR

   To define properties of a particular class .syntax{}

   NOTE -> same can be used in multiple times (ID always unique).

    .bg-black{
                color: #6b44ad;
            }
   

3. ID SELECTOR

   To define properties of a particular element which have that id

   start from #syntax{}.

    #danger{
                background-color: #889ae2;
            }
   

4. AND SELECTOR(CHAINED)

    <style>       
    li.bg-black.text-white{
                background-color: #cd8c32;
            }
    </style>
     <ul>
            <li class="bg-black text-white">iteam 1</li>
            <li class="bg-black">iteam 2</li>
            <li>iteam 3</li>
            <li>iteam 4</li>
            <li>iteam 5</li>
      </ul>
   

~ li represent all li elements.

~ li.bg-black here see changes in item 1 and item 2 (li and ba-black(AND -> Both condition should satisfy) )

~ li.bg-black.text-white represents only item 1.

1. COMBINED SELECTOR

   here we combine an element together through a comma giving them properties

    /*  Combined Selector */
            span ,p{
                background-color: #0f2681;
            }
   

2. INSIDE A ELEMENT

   div ul li {----Properties --- }

   it will target Highlight me and Highlight you.

     <style>
            div ul li{
                background-color: #621ab4;
            }
    </style>
    <div>
            <p>Lorem ipsum dolor sit amet.</p>
            <li>Awesome</li>
            <ul>
                <li>Highlight me</li>
                <li>Highlight you</li>
            </ul>
    </div>
   

   1. DIRECT CHILD

      we use this symbol to target child to element >

      div > p{}

      this will target LOREM IPSUM

      div > ul > li {}

      this will target Highlight you and me.

       <style>
            div > p {
                  background-color:red;
            }
       </style> 
      
       <div>
               <p>Lorem ipsum dolor sit amet.</p>
               <li>Awesome</li>
               <ul>
                   <li>Highlight me</li>
                   <li>Highlight you</li>
               </ul>
           </div>
      

   2. SIBLING SELECTOR

       <style>
               .sibling + p{
                     color:blue;
               }
       </style>
       <section>
               <p>Test 1</p>
               <p class="sibling"> Test 2</p>
               <p>Test 3</p>
               <p>Test 4</p>
               <p>Test 5</p>
           </section>
      

      this will target TEST 3 next to sibling class + p.