When adding .change at the end of CSS code, what does it do?

Question

Im doing a course on JS, HTML and CSS. When the instructor is making the website menu, he puts menu.change in the css. However, .change isnt in the html. .menu is.

What does menu.change do.

Here is the code

.menu {
  width: 4rem;
  height: 6rem;
  background-color: #000;
  position: fixed;
  top: 1rem;
  left: 5rem;
  border-radius: 30rem 30rem 15rem 15rem;
  box-shadow: 0.1rem 0.1rem 0.1rem #000, -.1rem -.1rem -.1rem #000;
  cursor: pointer;
  transition: ;

}

.menu.change {
  top: 15rem;

THanks

Once including this in the CSS, the element on the webpage changes location, 15rem down from the top. Does that mean that menu.change - .change is just a feature/animation or am i missing something?

It's a class name, just like `.menu`. `.menu.change` matches any element with both `menu` and `change` classes. — Barmar, Nov 21 '22 at 21:43
You presumably have JavaScript that adds the `change` class. — Barmar, Nov 21 '22 at 21:44
https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors — epascarello, Nov 21 '22 at 21:45

score 1 · Answer 1 · answered Nov 21 '22 at 21:44

1

Based on the limited information here, it looks like change is just a class that will be added (by javascript) to the element with the menu class to add additional style (the updated top value).

answered Nov 21 '22 at 21:44

Drew Pereli

224
1
7

When adding .change at the end of CSS code, what does it do?

1 Answers1