When should I define CSS class selectors inside other class selector definitions?

user_3686903 0
Viewed 113

EDIT 1 Based on suggestions, I tried this:

.lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
//    height: 46vh; <--- no height defined

/* nested for adding classes to change position and height of lower-container */
    .lower-container.lower-full {
      height: 92vh;
      top: 0;
    }

    .lower-container.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    .lower-container.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}

In the Elements Panel I see: enter image description here

But in the Styles panel I have: enter image description here

So although I'm applying the additional class, the height is not getting set, and the additional class isn't showing in the styles.

Original question I'm defining some classes inside of others like this:

.lower-container {
    height: 46vh;
    display: flex;
    justify-content: center;
    ...

    .lower-full {
        height: 92vh;
    }
}

Then when it comes time to change the height I'm doing:

    lowerContainerElement.classList.add('lower-full')

But on the console, the element doesn't have the .lower-full style in the Styles panel, even though in the Elements panel it shows class="{other classes} lower-full"

What am I doing wrong?

css
1 Answers

You cannot define a CSS selector inside another one with just vanilla CSS, you would need a pre-processor like SASS.

With CSS you can specify properties for when an element has only .lower-container or when it has both. That will be the equivalent of what you were trying to accomplish in your original code.

.lower-container {
   height: 46vh;
   display: flex;
   justify-content: center;
   ...
}

.lower-container.lower-full {
    height: 92vh;
}

If you are using SCSS files already then you are using the incorrect syntax

.lower-container {
    height: 46vh;
    display: flex;
    justify-content: center;
    ...

    &.lower-full {
        height: 92vh;
   }
}

Edit based on newest edit: Code should look like this:

.lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
//    height: 46vh; <--- no height defined

/* nested for adding classes to change position and height of lower-container */
    &.lower-full {
      height: 92vh;
      top: 0;
    }

    &.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    &.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}
user_169991410
Related