In the last lesson, Working with Position, The first Assignment says: “In main.css, locate .contact-btn a, which is the selector for anchor elements that have a parent with the “contact-btn” class.”.
Can I get an explaination for this? Im not able to understand the significance of both of them together and how I should decide to put X property in any of them?
I understand the selector and how to add properties.
If I have a property X which I want to implement on the object (say a button). Where should I mention this property? With the .contact-btn selector or the .contact-btn a selector?
I have another question too: Is there any reason why we put the position:relative property in contact-btn a and shift property like top: 2px in .contact-btn a:active? Why not both together in .contact-btn a:active??
Ive added the entire code for reference.
Here is the HTML:
<html>
<head>
<title>Tundra Gallery</title>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<h1 class="page-title">TUNDRA GALLERY</h1>
<p class="page-description">The Tundra Gallery is a collection of photographs from three distinct areas: arctic tundra, alpine tundra, and antarctic tundra. In tundra, the vegetation is composed of dwarf shrubs, sedges and grasses, mosses, and lichens, making for diverse ecology and stunning photos. </p>
</header>
<div class="gallery">
<figure class="gallery-item">
<img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss1.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss2.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss3.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss4.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss5.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss6.jpg">
</figure>
</div>
<nav>
<ul>
<li><a href="#"><b>Arctic</b></a></li>
<li><a href="#">Alpine</a></li>
<li><a href="#">Antarctic</a></li>
</ul>
<div class="contact-btn"><a>Contact</a>
</div>
</nav>
</body>
</html>