What does the symbol & before the selector mean?

Question

css

What does the symbol & before the selector mean?

&.owl-loaded{
    display: block;
  }

  &.owl-loading{
    opacity: 0;
    display: block;
  }

  &.owl-hidden{
    opacity: 0;
  }

Answer 1

Means that the name of the tag &.
But most likely, this is not CSS, but SCSS, in which the parent selector is designated as such .

Answer 2

It's a Sass preprocessor feature with SCSS syntax.
For example, you create a button:

.button {

}

And you need to set properties for this button when hovering over it:

.button {
    &:hover {

    }
}

That is, instead of the & sign , in this case, .button will be substituted after the compilation of this code.
A handy thing, try it, especially since SCSS is not much different from CSS in terms of syntax, now every self-respecting coder should use such a thing. I especially like the nesting, you don’t need to constantly list all the classes in a line, you just created one header class, and you already add the necessary classes inside it, like:

header {
    h1 {
    //свойство:значение;
    //свойство:значение;
    }
    p {
    //свойство:значение;
    //свойство:значение;
    }
}

In CSS it will look like this:

header {
}
header h1 {
}
header p {
}

That is, you have to write header 3 times , it infuriates me personally.