div.classname vs div .classname

1. div.classname:

   • This selector targets <div> elements that have the class classname.

   • Example:

     <div class="classname">This div will be styled</div>
     <div class="another-class">This div will not be styled</div>

     div.classname {
       color: red;
     }

     Only the first <div> will have its text color set to red because it has the class classname.

2. div .classname:

   • This selector targets any element with the class classname that is a descendant of a <div> element.

   • Example:

     <div>
       <span class="classname">This span will be styled</span>
     </div>
     <p>
       <span class="classname">This span will not be styled</span>
     </p>

     div .classname {
       color: blue;
     }

     Only the first <span> will have its text color set to blue because it is inside a <div> element.