Descendants of the main

Tell us what’s happening:
Describe your issue in detail here.

How do I get the descendant elements of the main element that is, img-div, image, img-caption and the others

   **Your code so far**
\ file: <!DOCTYPE html>
<html>
<head>
<style>
#main {
 background-color: grey;
 color: black;
 padding: 40px;
 text-align: center;
}

#title {
 background-color: grey;
 color: black;
 padding: 10px;
 text-align: center;
}
#img-div {
  
 }

 #image {
   display: block;
   max-width: 100%;
   height: auto;
   img-align: center;
 }

   #img-caption{
     background-color: white;

 }
    #tribute-info{
      background-color: white;
      color: black;
      padding: 10px;
      text-align: center;

 }
      #tribute-link{

 }
</style>
</head>
<body>
 


<!-- An element with a unique id -->
<main id="main">Dr. Norman Borlaug</main>
<h2 id= "title">The man who saved a billion lives</h2>

 <figure id="img-div"></figure>

  <img id="image"></img>

   <div id ="imd-caption"></div> 

<h2 id ="tribute-info"></h2>
<a id= "tribute-link"  href = "" target ="_blank">
 <h2 id ="tribute-info"></h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#main {
 background-color: grey;
 color: black;
 padding: 40px;
 text-align: center;
}

#title {
 background-color: grey;
 color: black;
 padding: 10px;
 text-align: center;
}
#img-div {
  
 }

 #image {
   display: block;
   max-width: 100%;
   height: auto;
   img-align: center;
 }

   #img-caption{
     background-color: white;

 }
    #tribute-info{
      background-color: white;
      color: black;
      padding: 10px;
      text-align: center;

 }
      #tribute-link{

 }
</style>
</head>
<body>
 


<!-- An element with a unique id -->
<main id="main">Dr. Norman Borlaug</main>
<h2 id= "title">The man who saved a billion lives</h2>

 <figure id="img-div"></figure>

  <img id="image"></img>

   <div id ="imd-caption"></div> 

<h2 id ="tribute-info"></h2>
<a id= "tribute-link"  href = "" target ="_blank">
 <h2 id ="tribute-info"></h2>
</body>
</html>

\ file: 

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Challenge: Build a Tribute Page

Link to the challenge:

Perhaps using * would be good?

<style>
  main * {
    color: red;
  }
</style>
<main>
  zero
  <p>one</p>
  <p>two</p>
  <div>
    <p>three</p>
    <div>four</div>
  </div>
</main>

In the above “zero” would stay black but “one”, “two”, “three”, and “four” would be styled red.

I feel like it might be better to specify each element though, but I could be wrong there.

Please I don’t really get it. Kindly explain further

* is a wildcard character, it selects every element within were it is. So if you chain it to another selector, it will grab every element under that selector.

* { /* would select everything on the page */
}

main * { /* would select everything under main */
}

div * { /* would select everything under div elements */
}
1 Like

Thanks @8-bitgaming, I have tried it but it is not working

What exactly is the lesson wanting you to do?

But you don’t have any of the elements within your main element.

1 Like

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