Explaination needed

#1

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?

Thanks a tonne.

#2

in your css file, there should be the following line:

.contact-btn a {
   /* possible css properties + values here */
}

given .contact-btn a is the selector, you can add properties between the curly brackets ({})

This is the general syntax for css:

selector {
    property: value;
    property: value;
}

in your case, the selector is .contact-btn a, it should exist in the css files, and you need to add properties to it

What is it you don’t understand? the selector? Or how to add a property/properties?

#3

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>

The CSS Code is:

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}

body {
  font-family: 'Lato', sans-serif;
  background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg');
  background-position: center top;
  background-size: cover;
  margin: 0;
}

a {
  color: #204156;
  text-decoration: none;
}

.page-title {
  text-align: center;
  font-weight: 100;
}

.page-description {
  border: 1px solid #000;
  margin: 2px;
  text-align: center;
  padding: 30px;
}

.gallery {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-item {
  margin: 20px;
}

.gallery-item .thumbnail {
  border: 5px solid #fff;
}

/* FOOTER NAVIGATION */

nav {
  background-color: #FFF;
}

nav li {
  display: inline;
  margin: 0;
  padding: 0 10px;
}

nav ul {
  display: inline;
}

.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;**
}

nav a {
  height: 60px;
  line-height: 60px;
  color: #204156;
  text-decoration: none;
}
#4

this depends if the property should apply to the div element or the anchor element.

because we always want the div to have a relative position, regardless of status (active vs non-active)

#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.