Learn CSS Transforms by Building a Penguin - Step 38

Tell us what’s happening:

Describe your issue in detail here.
So it wants me to use a :before psuedoselector apparently but wouldn’t this be more appropriate:

     .penguin:nth-child(1) {content:"";}

I was originally going to try the

.penguin-body >:nth-of-type(1) {content:“”;}

but when I was doing the quick google search to see if you could do that it showed me the nth-child function psuedo selector thingy. I come back all excited and then get it wrong anyways… gonna go back and do it the way it wants, although i’m confused how .penguin-body::before {} targets child items of the parent element .penguin-body. Is my newfound method a better way or am I overthinking? Figured I would post this in case any other of us noobs are having some critical thoughts around this. Also if anyone can drop some knowledge on when we use : | :: for psuedo-selectors that could be enlightening. Sorry I keep adding more but also why do we not have a (0) as the first item in these functions such as nth-()? I thought with programming we gotta always start at 0? That’s one that’s been confusing me throughout my freeCodeCamp experience. Carpe Diem y’all! :smiling_face:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="sun"></div>
    <div class="penguin">
      <div class="penguin-head"></div>
      <div class="penguin-body"></div>

    <div class="ground"></div>
/* file: styles.css */
body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;

.left-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
  position: absolute;
  transform: skew(0deg, 44deg);
  z-index: 2;
  margin-top: 100px;

.back-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
  position: absolute;
  z-index: 1;
  transform: rotate(45deg);
  left: 110px;
  top: 225px;

.sun {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: absolute;
  border-radius: 50%;
  top: -75px;
  right: -75px;

.penguin {
  width: 300px;
  height: 300px;
  margin: auto;
  margin-top: 75px;
  z-index: 4;
  position: relative;

.penguin * {
  position: absolute;

.penguin-head {
  width: 50%;
  height: 45%;
  background: linear-gradient(
    rgb(239, 240, 228)
  border-radius: 70% 70% 65% 65%;
  top: 10%;
  left: 25%;
  z-index: 1;

.penguin-body {
  width: 53%;
  height: 45%;
  background: linear-gradient(
    rgb(134, 133, 133) 0%,
    rgb(234, 231, 231) 25%,
    white 67%
  border-radius: 80% 80% 100% 100%;
  top: 40%;
  left: 23.5%;

/* User Editable Region */

.penguin-body:nth-child(1) {content:"0";}

/* User Editable Region */

.ground {
  width: 100vw;
  height: 400px;
  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
  z-index: 3;
  position: absolute;
  margin-top: -58px;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36 Edg/

Challenge Information:

Learn CSS Transforms by Building a Penguin - Step 38

According to 🙌 StackOverflow 🙌 Psuedo-Classes are used via : whereas Psuedo-Elements are used via :: 
    Apparently Psuedo-Classes handle states of your element while Psuedo-Elements are for targeting particular elements within your element. 
It is my understanding now that : will work for all Psuedo -Selectors within these two typings, if any of this is misleading please let me know. 

Also here is a chat I had with ai to clarify the difference between child combinators and descendant combinators; and also 0-based indexing vs 1-based indexing:

Apparently I can only post one media so here is all of them… sorry to make you zoom.

Imma go actually complete this assignment now lol, hopefully this has helped someone else too :pray:

1 Like

.penguin:nth-child(1) { content: ""; } : This selector targets the first .penguin element, but it adds an empty content string directly to that element. It doesn’t create a pseudo-element inside the .penguin-body .