CSS Connection между детьми положения элементов в разных родительских контейнерах? ⇐ Html

[Anonymous]

Есть ли способ CSS для подключения .menu> div.show положением четырех к четвертому .parent div.item , как это было сделано с жестким кодированием 4/5 в nth-child () , когда число каждого не известно, хотя знайте, что они будут равны; Как будто аргумент в nth-child () может быть переменной?

Код: Выделить всё

.parent {
border: 1px solid black;
position: relative;
width: fit-content;
}
.menu {
display: flex;
flex-flow: row nowrap;
}
.menu > div {
height: 10px;
width: 10px;
margin: 2px;
background-color: blue;
}
.menu > div.show {
background-color: red;
}
div.item {
display:none;
position: absolute;
height: 20px;
width: 10px;
background-color: green;
color: white;
padding: 2px;
}
.parent:has(> .menu .show:nth-child(4)) {
border-color: red;
}
.parent:has(> .menu .show) > .item:nth-child(5) {
display: block;
}< /code>





1
2
3
4
5
< /code>
< /div>
< /div>
< /p>

 edit: добавил этот пример позже. < /strong>
Этот пример иллюстрирует, что я пытался сделать. Я не мог понять, как сохранить скользящий див внутри каждого узла папки, так как скользящий Div часто шире; и не хочу, чтобы он покрывал смежный узел папки или был видимым в пространстве между ними, когда он скользит или вышел. Div на узел папки, хотя и не ребенок узла папки.  Спасибо.let catObj = Object.create(null,{
selDropArrow: {
value: null,
writable: true
},
dropSelect: {
value: [document.querySelector('.dropSelect.ds0'),document.querySelector('.dropSelect.ds1')]
},
ds_no: {
value: null, // 0 or 1
writable: true
}
});

document.querySelector('.catPathWrapper').addEventListener(
'mousedown',
(evt)=>{
let e = evt.target;
if ( e.matches('.dropArrow, .dropArrow *') && (e = e.closest('.dropArrow')) ) {
if  ( catObj.selDropArrow ) {
if ( catObj.selDropArrow === e) {
e.classList.remove(`show${catObj.ds_no}`);
catObj.selDropArrow = null;
catObj.ds_no = null;
} else {
let n = catObj.ds_no;
catObj.selDropArrow.classList.remove(`show${n}`);
n = n === 0 ? 1 : 0;
catObj.dropSelect[n].style.left = e.parentNode.offsetLeft + 'px';
e.classList.add(`show${n}`);
catObj.selDropArrow = e;
catObj.ds_no = n;
}
} else {
catObj.dropSelect[0].style.left = e.parentNode.offsetLeft + 'px';
e.classList.add('show0');
catObj.selDropArrow = e;
catObj.ds_no = 0;
}
}
},
false
);< /code>
button {
background-color: transparent
}

.flexrow {
display: flex;
flex-flow: row nowrap;
}
.catPath {
position: relative;
padding-bottom: 10px;
background-color: rgb(181,192,197);
}
.catPathWrapper {
position: relative;
z-index: 2;
padding-top: 10px;
background-color: inherit;
background-color: rgb(181,192,197);
}
.catPathNode {
margin: 0 10px;
}
.catPathNode button:first-child {
padding: 3px 7px;
}
.catPathNode button {
border: 1px solid transparent;
}
.catPathNode button:first-child {
border-radius: 3px 0 0 3px;
border-right-width: 0;
}
.catPathNode button.dropArrow {
border-radius: 0 3px 3px 0;
padding: 3px 3px 1px 3px;
}
.catPathNode button.dropArrow > div {
border-radius: 3px;
border-top: 12px solid rgb(100,100,100);
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 0;
padding: 0;
transform: rotate(0deg);
transition-duration: 300ms;
transition-property: transform;
transition-timing-function: ease-in-out;
}
.catPathNode button.dropArrow.show0 > div,
.catPathNode button.dropArrow.show1 > div {
transform: rotate(-180deg);
}
div.dropSelect {
transition-duration: 300ms;
transition-property: transform;
transition-timing-function: ease-in-out;
transform: translateY(0);
height: 100px;
width: 150px;
background-color:white;
border: 1px solid black;
position: absolute;
bottom: 10px;
}
.catPath:has(> .catPathWrapper .dropArrow.show0) > div.dropSelect.ds0,
.catPath:has(> .catPathWrapper .dropArrow.show1) >  div.dropSelect.ds1 {
transform: translateY(100%);
z-index: 1;
}
.catPathNode:hover button {
border-color: rgb(0,0,0,0.3);
}
.catPathNode:hover button.dropArrow {
background-color: rgb(180,180,180);
}
.catCoverTop, .catCoverBottom {
background-color: darkblue;
height: 50px;
width: 100%;
}
.catCoverTop {
position: relative;
z-index: 5;
}< /code>





Folder 1




Folder 2




Folder 3




Folder 4

Подробнее здесь: https://stackoverflow.com/questions/797 ... ent-contai