Learn More About CSS Pseudo Selectors by Building A Balance Sheet - Step 40

HTML-CSS
1

Tell us what’s happening:

I am pretty confused on this step. Not sure what I am missing.

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

div .years{top:0;}

/* 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/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Challenge Information:

Learn More About CSS Pseudo Selectors by Building A Balance Sheet - Step 40

2

Hi @keith_freitas01,

Let’s break down the instructions.

  1. Create a #years selector – Currently you have a div .years selector.
  2. Within the #years selector, enable flexbox. We would do this with the display property.
  3. Justify the content to the end of the flex direction. So you would want the justify-content property to follow the direction to the end of the flex.
  4. Make the element sticky, which we would do with the position property.
  5. Fix it to the top of its container with top: 0, which is directly gives you the solution for this step.

So we would have:

#selector {
  display: what you use to make a flexbox;
  justify-content: what you use for end of flex-direction;
  position: what would make a position sticky?;
  top: 0;
}

I hope this helps. Happy coding!

1 Like