Working with position - please explain use of different selectors


This lesson says:
"In main.css, locate .contact-btn a, which is the selector for anchor elements that have a parent with the "contact-btn" class.
Next, locate the .contact-btn a:active selector. :active is a psuedo-class selector, which we use to style an element only while it's being clicked."

What i'm confused about, is why do you need to put the cursor, margin, padding, etc. CSS in the ".contact-btn a" selector. Couldn't you just add the same code to the ".contact-btn" selector and have it do the same thing? Then just change the ".contact-btn a:active" selector to ".contact-btn:active"? Wouldn't that function the same? Why is the "a" one needed?

Sorry if I got any of the terms wrong! Thanks for your help!

.contact-btn {
  float: right;

.contact-btn a {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  position: relative;


.contact-btn a:active {
 top: 2px;


Could you provide us with the HTML-code you are using in conjuction with the above CSS-code....


Sure! I wasn't sure how much to paste from the lesson. This is the html that I think would be relevant, but let me know if you need more from either the HTML or CSS.

    <li><a href="#"><b>Arctic</b></a></li>
    <li><a href="#">Alpine</a></li>
    <li><a href="#">Antarctic</a></li>
  <div class="contact-btn"><a>Contact</a>

Thanks! :slightly_smiling:



The anchor element is a so-called inline Element
The div Element is a so-called block Element.

The div being the =parent= to the =child= anchor Element
you would want the anchor Element to Inherit the CSS characteristics/attributes
from the div Element.
And that's when you have entered swamp-land.....

== discussions / opinions ==
html inheritance div element anchor element
html which attributes anchor element inherit from div element