Build a Cat Painting - Step 57

HTML-CSS
1

Tell us what’s happening:

why does it keep saying I need a .cat-mouth div selector when I clearly have one?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head">
        <div class="cat-ears">
          <div class="cat-left-ear">
            <div class="cat-left-inner-ear"></div>
          </div>
          <div class="cat-right-ear">
            <div class="cat-right-inner-ear"></div>
          </div>
        </div>

        <div class="cat-eyes">
          <div class="cat-left-eye">
            <div class="cat-left-inner-eye"></div>
          </div>
          <div class="cat-right-eye">
            <div class="cat-right-inner-eye"></div>
          </div>
        </div>
        
        <div class="cat-nose"></div>
          
        <div class="cat-mouth">
          <div class="cat-mouth-line-left"></div>
          <div class="cat-mouth-line-right"></div>
        </div>
      </div>
    </main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: linear-gradient(#5e5e5e 85%, #45454f 100%);
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
}

.cat-left-ear {
  position: absolute;
  top: -26px;
  left: -31px;
  z-index: 1;
  border-top-left-radius: 90px;
  border-top-right-radius: 10px;
  transform: rotate(-45deg);
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 70px solid #5e5e5e;
}

.cat-right-ear {
  position: absolute;
  top: -26px;
  left: 163px;
  z-index: 1;
  transform: rotate(45deg);
  border-top-left-radius: 90px;
  border-top-right-radius: 10px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 70px solid #5e5e5e;
}

.cat-left-inner-ear {
  position: absolute;
  top: 22px;
  left: -20px;
  border-top-left-radius: 90px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 40%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #3b3b4f;
}

.cat-right-inner-ear {
  position: absolute;
  top: 22px;
  left: -20px;
  border-top-left-radius: 90px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 40%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #3b3b4f;
}

.cat-left-eye {
  position: absolute;
  top: 54px;
  left: 39px;
  border-radius: 60%;
  transform: rotate(25deg);
  width: 30px;
  height: 40px;
  background-color: #000;
}

.cat-right-eye {
  position: absolute;
  top: 54px;
  left: 134px;
  border-radius: 60%;
  transform: rotate(-25deg);
  width: 30px;
  height: 40px;
  background-color: #000;
}

.cat-left-inner-eye {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 10px;
  height: 20px;
  transform: rotate(10deg);
  background-color: #fff;
  border-radius: 60%;
}

.cat-right-inner-eye {
  position: absolute;
  top: 8px;
  left: 18px;
  transform: rotate(-5deg);
  width: 10px;
  height: 20px;
  background-color: #fff;
  border-radius: 60%;
}

.cat-nose {
  position: absolute;
  top: 108px;
  left: 85px;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  transform: rotate(180deg);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #442c2c;
}

/* User Editable Region */

.cat-mouth .cat-mouth-line-left .cat-mouth-line-right  {
  width: 30px;
  height: 50px;
  border: 2px solid #000;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15

Challenge Information:

Build a Cat Painting - Step 57

Screenshot 2025-11-30 at 1.36.37 PM
Screenshot 2025-11-30 at 1.36.37 PM1318×1078 75.8 KB

2

It could be that your

elements are not properly lined up. Make sure your opening and closing
elements are correctly lined up. This will prevent
elements from being improperly nested.

4

Yes, I am referring to your HTML.

5

I would also take a look at your closing

elements. I am not sure if these are the issues, but I love that you are looking for your bugs. Good luck!

7

The syntax for a descendant selector is:

selector1 selector2 {
  /* property declarations */
}

What is Descendant Selector in CSS ? - GeeksforGeeks

8

I see…correct?

.ancestor descendant1 descendant2 {

}
9

I still don’t understand why my syntax is wrong.

.cat-mouth /* parent selector/ .cat-mouth-line-left /* descendant selector1 / .cat-mouth-line-right / * descendant selector2/

are you saying I shouldn’t have the parent selector in the syntax? I tried that it still didn’t work.

10

This is from the article I sent you:

Syntax:

first_selector second_selector {
     css properties: values;
}

The first simple selector (first_selector) represents the ancestor element or parent element, and the second simple selector (second_selector) represents the descendant element. We use white space between these two to represent the descendant selector.

Can you think of how you can target both of the div element descendants of .cat-mouth?

11

Aside from having white space between all the selectors I have tried using commas between all of them. I have tried using a comma between just the descendant selectors. I have tried creating two different CSS commands (is that the right terminology ?) each with only one of the descendant selectors. How does the syntax I already have not look like what you are telling me I should have?

12

You have two descendant elements. You can only have one. Read the article excerpt again, please.

13

I understand, I believe…

You use the ancestor and the first descendant only. All other descendants will take the properties of the first descendant; there’s no need to select the other descendants.

And the white space is sufficient, there isn’t a need for a “.” to select the descendant.

14

I definitely have used just one descendant in the syntax. it still gave me the same error

Screenshot 2025-11-30 at 4.50.38 PM
Screenshot 2025-11-30 at 4.50.38 PM1290×1000 73.4 KB

15

Try removing the the “.”

16

I have for sure read it several times. still can”t make sense of it or what you are trying to get at. I have tried every variation of the syntax I can think of. tired of looking at this stupid cat face. moving on

17

It’s alright to walk away, but don’t give up! You got this…:flexed_biceps:

18

no the period is what let’s the CSS know it is the Class referenced in the HTML.

19

Yes, but I think you only need it on the ancestor.

20

n o you need it on both

Screenshot 2025-11-30 at 4.57.05 PM
Screenshot 2025-11-30 at 4.57.05 PM1314×1032 73.7 KB

21

Try .cat-mouth div {

}

Use the tag, not the class name.

22

this is what Gemini says….

Screenshot 2025-11-30 at 5.27.14 PM
Screenshot 2025-11-30 at 5.27.14 PM1528×1088 86.6 KB

and this is my code that matches exactly…

Screenshot 2025-11-30 at 5.28.48 PM
Screenshot 2025-11-30 at 5.28.48 PM1280×1100 78.7 KB