Learn Intermediate CSS by Building a Cat Painting - Step 59

I have figured out the answer already.
My question is regarding the use of the word div inside the .cat-mouth selector.
Why do we have to use it? i tired reading on the use of descendant selectors but I’m having some trouble understanding as to why.

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 div {
  width: 30px;
  height: 50px
  border: 2px solid #000
}

/* User Editable Region */

Your browser information:

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

Challenge Information:

Learn Intermediate CSS by Building a Cat Painting - Step 59

Hello!

The reason we target the div is because we only want to update whatever is within the div in the catmouth.

For example: 

.cat-mouth  may contain tongue, teeth, maybe even color for the inside of the mouth. 

.cat-mouth div may contain only the inside of the mouth.

this way we can target the inside of the mouth, while not affecting the other contents within the mouth.

Maybe we want the inside of the mouth dark, but not the teeth, not the tongue.

I hope this explains why.

Wishing you good progress!

1 Like

Thank you for taking the time to respond. Now I understand it :sunglasses:

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