仅当下一个元素具有特定类时,如何应用样式?

时间:2013-09-07 19:26:35

标签: html css css-selectors

标记:

<li class="divider"></li>
<li class="active"><a href="#">Home</a>
<li class="divider"></li>
<li><a href="#">Blog</a></li>

如果.divider是下一个兄弟,我该如何在第一个.active添加样式?

我在考虑.divider + .active,但这会将样式应用于.active

.divider {
  border-left: 1px solid #d0d0d0;
}
.active {
  background: #fff;
}
// when the next sibling is .active, border-color: transparent;

4 个答案:

答案 0 :(得分:5)

你现在无法在CSS中选择前一个元素,你可以做的是通过提供一些不同的类来手动定位类,如

<li class="divider target_me"></li>

而不仅仅是使用

ul.class_name li.target_me {
   /* Styles goes here */
}

否则,如果它是li

的第一个孩子

您可以使用ul.class_name li:first-child,如果不是,只需使用nth-of-type(n),将n替换为li的第n个号码,这样您就不需要也称呼课程。

例如

ul.class_name li:nth-of-type(2) {
   /* Styles here */
}

上面的选择器将选择具有指定类名的2nd子元素ul


对CSS还不满意吗?您可以选择JS / jQuery解决方案,但如果标记是静态的,我建议您使用nth,如果您有权访问标记,则可以在要设置样式的元素上至少调用类。


注意:您不能将li标记作为直接子项嵌套到li,请考虑将标记更改为以下内容。

<ul>
   <li>
       <a href="#">Home</a>
       <ul>
          <li>Sub</li>
       </ul>
   </li>
</ul>

答案 1 :(得分:3)

这是一个黑客攻击,但可以为你工作:

<div class='third'>third</div>
<div class='second active'>second</div>
<div class='first'>first</div>

div {
    color: black;
    float: right;
}

.active + .first {
    color: pink;
}

Fiddle

答案 2 :(得分:1)

CSS目前还没有对此直接支持,但jQuery使其相对轻松,并且假设这是您项目的要求,很可能是最佳选择。

在jQuery中,它会写成这样的东西:

if element.next().hasClass('active'){
    element.addClass('divider')

答案 3 :(得分:1)

这是Fiddle

<强> CSS

.divactive {
  border-left: 1px solid transparent;
}

<强>的jQuery

$(function() {

  $('.active').prev('.divider').addClass('divactive');

  //or

  $('.active').prev('.divider').css({ 'border-left': '1px solid transparent' });

});