CSS Specificity

Determine which CSS selector would be used to style the element.

Styling the anchor tag

#content a:hover { background-color: pink; }                   /* selector #1 */
#content div.normal a:hover { background-color: yellow; }      /* selector #2 */    
#content .normal a:hover { background-color: red; }            /* selector #3 */  
div#content .normal a:hover { background-color: lightblue; }   /* selector #4 */  
<div id="content">
  <div class="subcontent">
    <p class="normal">
      <a href="https://cs4640.cs.virginia.edu/images/tardis.png">Tardis</a> 
      <br/><br/>
      <img src="https://cs4640.cs.virginia.edu/images/tardis.png" alt="tardis image" />
    </p>
    <small>Image from https://unsplash.com/photos/qFzOUYdGA0U</small>
  </div>
</div> 

Styling the img tag

#content .normal img:hover {          /* selector #1 */ 
  border: 5px dotted red; 
}       
div#content .normal img:hover {       /* selector #2 */
  border: 2px solid silver;
  border-radius: 10px; 
  padding: 20px;
}
<div id="content">
  <div class="subcontent">
    <p class="normal">
      <a href="https://cs4640.cs.virginia.edu/images/tardis.png">Tardis</a> 
      <br/><br/>
      <img src="https://cs4640.cs.virginia.edu/images/tardis.png" alt="tardis image" />
    </p>
    <small>Image from https://unsplash.com/photos/qFzOUYdGA0U</small>
  </div>
</div> 

Styling the img tag

#content .normal img:hover {          /* selector #1 */ 
  border: 5px dotted red; 
}       
div#content > .normal img:hover {     /* selector #2 */
  border: 2px solid silver;
  border-radius: 10px; 
  padding: 20px;
}  
<div id="content">
  <div class="subcontent">
    <p class="normal">
      <a href="https://cs4640.cs.virginia.edu/images/tardis.png">Tardis</a> 
      <br/><br/>
      <img src="https://cs4640.cs.virginia.edu/images/tardis.png" alt="tardis image" />
    </p>
    <small>Image from https://unsplash.com/photos/qFzOUYdGA0U</small>
  </div>
</div>