Learn CSS Transforms by Building a Penguin - Step 38

HTML-CSS
1

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

Your code so far


  <body>
    <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>

Question = To give the penguin body a crest, create a pseudo-element that is the first child of the .penguin-body element. Set the content property of the pseudo-element to an empty string.

I know I need to follow the question but just out of curiosity, can’t I use the :first-of-type pseudo-element rather than ::before? Shouldn’t it be the same?

Your browser information:

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

Challenge: Learn CSS Transforms by Building a Penguin - Step 38

Link to the challenge:

2

Hey!
The lesson step you’ve provided does not match the code. Are you sure you’re referring to the correct lesson and step?

3

Hi I know what I need to do to pass the question

I just want to know what is the difference between using ::before vs :first-of-type since I thought they both target the same thing?

.penguin-body::before {
  content: "";
}
1 Like
4

::before selector inserts something before the content of each selected element(s).
Example:

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
Example:

So, they are both used to do different things.

5

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