How can I access the first class through a second class that is lower than the first?

Question

css

.popup_text{
          display: flex;
          flex-direction: column;
          .select{
            z-index: 10;
            cursor: pointer;
            margin-top: 30px;
            .select_body{
              max-width: 400px;
              .select_title{
                border: 1px solid #C6CCD5;
                color: #85898C;
                padding: 10px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                i{
                  color: #C6CCD5;
                }

                &.active + .select_content{
                  .item{
                    opacity: 1;
                    visibility: visible;
                  }
                }

                &.active{
                  border-bottom: 1px dashed #C6CCD5;
                }

                &.active{
                  .popup_text{
                    border: 2px solid red;
                  }
                }

              }
              .select_content{
                .item{

                  opacity: 0;
                  visibility: hidden;

                  padding-left: 20px;
                  padding-top: 10px;

                  transition: all 0.5s;

                  background: white;

                  margin-left: 10px;
                  margin-top: 10px;
                  .item_title{
                    display: flex;

                    p{
                      margin-left: 7px;
                      color: #8D99AB;
                      font-size: 17px;
                    }
                  }

                  .item_content{
                    .item{
                      display: flex;
                      margin-top: 15px;

                      p{
                        margin-left: 7px;
                      }
                    }
                  }
                }
              }

I want via .select_title with class active to access .popup_text class which is above .select_title, how can i do that?

Answer 1

gazes12 , if I'm not confusing anything, in CSS you can't set rules for the selector depending on the state of the child elements. It looks like you want something like the :has pseudo -class , but it's not yet supported by browsers.

Answer 2

if all this is beyond css, use js/query