定位上一个兄弟元素CSS

我正在使用关闭画布菜单，我一直试图正确工作。为了让我的固定菜单和非画布可以很好地播放，我不得不将我的标题从画布内部包装中取出，但现在当菜单打开时，我的标题不会移过来。定位上一个兄弟元素CSS

当关闭画布打开时，它将.is-open-right应用于内部包装器，然后将CSS应用于它。

我试图将这行CSS添加到我的头只有当.is右开放类被添加到我的包装。

-webkit-transform: translateX(-450px); 
    transform: translateX(-450px);

我努力的目标是这样的：

.is-open-right, .is-open-right > .header { 
-webkit-transform: translateX(-$offcanvas-size-large); 
transform: translateX(-$offcanvas-size-large);

}

我的HTML看起来像这样当菜单关闭：

<div class="off-canvas-wrapper"> 
<header class="header scrolled" role="banner"></header> 
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div> 
</div>

HTML打开时

<div class="off-canvas-wrapper"> 
<header class="header scrolled" role="banner"></header> 
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""></div> 
</div>

我只能在下一个兄弟元素拥有类时才能定位我的标题元素.is-open-right？从我读过的内容看来，我可能不得不去JS解决方案。

来源

2016-04-19 4ever Youngz

没有'以前的兄弟姐妹'选择器。你的解决方案应该是确保你正在将这些类应用到父元素。

你的HTML应该是这样的：

<div class="off-canvas-wrapper is-off-canvas-open is-open-right"> 
    <header class="header scrolled" role="banner"></header> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div> 
</div>

另一种选择是移动off-canvas-wrapper-inner低于header让您可以指定它作为下一个兄弟（使用+）。

当前的W3规格草案还包括一个:has pseudoselector。当完全支持我们可以用下面的选择器来解决这个问题：.previous-class:has(+ .next-class)

来源

2016-04-19 23:27:40 mtaube

这将需要我改变与off-canvas一起工作的JS文件，所以这不是一个真正的选择，因为我不得不重写一个很多东西。此外，随着你的解决方案，这将移动一切，搞砸了我的固定标题。翻译和固定位置表现不佳。不幸的是，这真的不是一个选项，听起来像我将不得不做一个JS脚本来做到这一点。 –

我看，如果你不能改变类或元素的顺序，那么我不认为你可以用CSS来定位标题。这是否回答你的问题？ – mtaube

是的，它安慰我认为我必须做的事情。感谢您的意见和指导！ –

定位上一个兄弟元素CSS

回答

相关问题