Select all elements before element with class?

Question

In CSS is it possible to select all elements before an element with a given class?

Example HTML:

    One
    <         


        
                      

              相关标签:
       
      

Answer 1

a {
  text-decoration: none;
  border-left: 1px solid black;
}

a.active, a.active ~ * {
  border: none;
}

<div>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
    <a href class="active">Four</a>
    <a href>Five</a>
</div>

Answer 2

Well, Normally it's not possible, but you can hack it someway.

So for example if you want to do this:

.active:(all-before) {
    border-left: solid 1px #C0FFEE;
}

then you can do this:

a {
    border-left: solid 1px #C0FFEE;
}
a.active, a.active~a {
    border-left: none;
}

So you put the style you want in the first selector, and then you disable that design in the second selector.

Working example: http://jsfiddle.net/prrd14u2/

Also you can use javascript, jquery as another solution.