CSS Advance. ##

//Direct Child.
div > p {
  // Will look for child "p" in 'div', It won't select any nested elements 'p'.
}

//Direct After.
div + p {
  //WIll select all the 'div' and 'p' on the same level. ( Sibling )
}

//By Attribute.
input[target] { }
 //Or
input[type='text'] { }

//Nth Child.
ul li:nth-child( 3n+0 ) { }

ul li:nth-of-type(odd) {
  //Will Select All odd Number li's.
}

//Before And After,
ul li:before { content : 'add before the Li' }
ul li:after { content : 'Added at the End of the li' }

//Box Shadow.
div.box { 
  // offset-X | offset-y | blur-radius | spread-radius | color.
  box-shadow : 3px 3px 10px 1px grey;
 }

//Text-shadow.
div p.heading {
 // h-shadow | v-shadow | blur | color. 
  text-shadow : 0.4rem 0.3rem 0.7rem steelblue;
}

//Variable ( Customer Properties ).
:root { --variableNameHere : red }
p.heading { color : var(--variableNameHere) }
//or  
 div p { 
   --lightColor : grey;
    color : var(--lightColor);
   //Not Used, Not good Approach.
  }

//Keyframes.
.box { 
  animation-name : animateOne;
  animation-duration : 2s;
 }
 @keyframes animateOne { 
 from { }
  to {}
  //We can also use Percentages.
}
 

//Transition.
.box {  transition : background  2s ease-in-out; }
//Will make transition only on background ,Or
.box {  transition : all 2s ease-in-out; }
 // 'all' will make transition on everything( background/border... ).
.box:hover { 
  background : red;
  border-radius : 50%;
  height : 300px;
  width : 300px;
 }

//Transform.
   .box {
        background: white; width: 300px;height: 300px;
        /* Transform - rotate, scale, skew */
        /* transform: rotate(25deg); */
        /* transform: skew(25deg); */
        /* transform: scale(2); */
        transition: all 1s ease-in-out;
      }

      .box:hover {
        /* transform: rotate(180deg); */
        /* transform: skew(25deg); */
        /* transform: scale(2); */
        /* border-radius: 50%;
        background-color: blue; */
        /* transform: translateY(100px);
        transform: translateX(-100px); */
        /* x & y */
        transform: translate(100px, 100px);
        transform: translate3d(100px, 100px, 100px);
      }