.class * usage and function?

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

Hello,

I went back to this challenge to try to fully understand how everything was created.
I however cannot understand or find information on how the
.penguin * {position: absolute} class works.
there is already on position:relative; in the main penguin class,
what is the use of the * class on how does this work? thank you!

Luc

  **Your code so far**

<style>
.penguin {

  /* Only change code below this line */
  --penguin-skin: black;
  --penguin-belly: gray;
  --penguin-beak: yellow;
  /* Only change code above this line */

  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
}

.penguin-top {
  top: 10%;
  left: 25%;
  background: var(--penguin-skin, gray);
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
  top: 40%;
  left: 23.5%;
  background: var(--penguin-skin, gray);
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}

.right-hand {
  top: 0%;
  left: -5%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(45deg);
  z-index: -1;
}

.left-hand {
  top: 0%;
  left: 75%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 30% 120%;
  transform: rotate(-45deg);
  z-index: -1;
}

.right-cheek {
  top: 15%;
  left: 35%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.left-cheek {
  top: 15%;
  left: 5%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.belly {
  top: 60%;
  left: 2.5%;
  background: var(--penguin-belly, white);
  width: 95%;
  height: 100%;
  border-radius: 120% 120% 100% 100%;
}

.right-feet {
  top: 85%;
  left: 60%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(-80deg);
  z-index: -2222;
}

.left-feet {
  top: 85%;
  left: 25%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(80deg);
  z-index: -2222;
}

.right-eye {
  top: 45%;
  left: 60%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.left-eye {
  top: 45%;
  left: 25%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.sparkle {
  top: 25%;
  left: 15%;
  background: white;
  width: 35%;
  height: 35%;
  border-radius: 50%;
}

.blush-right {
  top: 65%;
  left: 15%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.blush-left {
  top: 65%;
  left: 70%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.beak-top {
  top: 60%;
  left: 40%;
  background: var(--penguin-beak, orange);
  width: 20%;
  height: 10%;
  border-radius: 50%;
}

.beak-bottom {
  top: 65%;
  left: 42%;
  background: var(--penguin-beak, orange);
  width: 16%;
  height: 10%;
  border-radius: 50%;
}

body {
  background:#c6faf1;
}

.penguin * {
  position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
  <div class="right-hand"></div>
  <div class="left-hand"></div>
  <div class="right-feet"></div>
  <div class="left-feet"></div>
</div>
<div class="penguin-top">
  <div class="right-cheek"></div>
  <div class="left-cheek"></div>
  <div class="belly"></div>
  <div class="right-eye">
    <div class="sparkle"></div>
  </div>
  <div class="left-eye">
    <div class="sparkle"></div>
  </div>
  <div class="blush-right"></div>
  <div class="blush-left"></div>
  <div class="beak-top"></div>
  <div class="beak-bottom"></div>
</div>
</div>
  **Your browser information:**

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

Challenge: Use CSS Variables to change several elements at once

Link to the challenge:

* selects everything.

.penguin * selects all descendant elements of elements with the penguin class.

How thank you! don’t know how I did not find that when I looked up class * css selectors, sometimes Ecosia is a bit tricky on me.

But then how does it react with the position already present in penguin? I saw that I cannot inverse them or remove it, both on absolute seem to be not change anything. I am very confused on why the * class and the normal class are necessary on to make the penguin take shape.

edit: added the normal class to the last sentence

.penguin {
  position: relative;
}

.penguin * {
  position: absolute;
}

^ This is short and sweet.

They could have written the below instead. It does the same thing but as you can see it’s quite unwieldy:

  .penguin {
    position: relative;
  }

  .penguin-top {
    position: absolute;
  }

  .penguin-bottom {
    position: absolute;
  }

  .right-hand {
    position: absolute;
  }

  .left-hand {
    position: absolute;
  }

  .right-cheek {
    position: absolute;
  }

  .left-cheek {
    position: absolute;
  }

  .belly {
    position: absolute;
  }

  .right-feet {
    position: absolute;
  }

  .left-feet {
    position: absolute;
  }

  .right-eye {
    position: absolute;
  }

  .left-eye {
    position: absolute;
  }

  .sparkle {
    position: absolute;
  }

  .blush-right {
    position: absolute;
  }

  .blush-left {
    position: absolute;
  }

  .beak-top {
    position: absolute;
  }

  .beak-bottom {
    position: absolute;
  }

Does that answer your question? Or are you wondering about what absolute and relative actually do?

This makes perfect sense!
Thank you very much for your help and have a nice day!

Just to explain position, the absolutely positioned elements are positioned via the top, right, bottom, and left properties. Setting the penguin container box’s position to relative makes all those absolutely positioned elements position relative to it.

ie, if one of the children has top: 0, that means put it at the top of the penguin box. Likewise top: 100px says put it 100 pixels below the top of the penguin box.

Here’s a pen that hopefully visualizes it for you better: https://codepen.io/colinthornton/pen/OJgweXQ?editors=0100

All the little boxes have absolute, and the big box has relative. Therefore all the little boxes are positioned according to the boundaries of the big box.

Oh thank you for the pen! It took me some time but I got that, I think what is the most confusing is if you change relative to absolute on the .container nothing moves.

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