Как мне обратится к первому классу через второй класс который ниже первого?

Question

[gazes12]

.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;
											}
										}
									}
								}
							}

Я хочу через .select_title с классом active, обратится к классу .popup_text который выше .select_title, как я могу это сделать?

Comments

[Михаил]

Ничего не понятно. Что, в контексте CSS, значит "обратиться к классу"?

[gazes12]

Михаил, Когда класс .select_title активный, то я хочу в классе .popup_text сделать рамку, в контексте css если бы он не был выше я бы написал

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

Тут идет обращение к классу .popup_text, ну так как он выше это не работает

[Алексей Уколов]

Покажите разметку.

[Сергей delphinpro]

gazes12, и не будет работать. В css нет селекторов для выбора предыдущего элемента

[Ankhena]

Без макета и разметки сложно. А в выложенной простыне много лишнего.

Напрямую так, как вы хотите, работать не будет.

Вы можете, например, сотворить псевдоэлемент для .active (или для кого-то после или внутри active) и попробовать спозиционировать его туда где нужна рамка.

[ThunderCat]

Никак. Стили работают внутрь, но не работают наружу. Можно сделать только через js.

Answer 1

[Михаил]

gazes12, если ничего не путаю, в CSS нельзя задавать правила для селектора в зависимости от состояния дочерних элементов. Похоже вы хотите что-то вроде псевдокласса :has, но он пока не поддерживается браузерами.

Answer 2

[Александр Васильев]

если все это выходит за рамки css, пользуйтесь js/query