Css overriding tilde selector

Question

I have an editor project written with html, css and javascript and need to use "/*" and "*/" for multiline commenting. The lines between "/*" and "*/" will be commented and with different opacity and italic style. This can be achieved through javascript but it may slow the application. I search for a css solution.

Html part:

<div class="line multiLineCommentSTART">/*</div>
<div class="line">This text will be commented NO:1</div>
<div class="line">This text will be commented NO:1</div>
<div class="line">This text will be commented NO:1</div>
<div class="line multiLineCommentEND">*/</div>

<div class="line multiLineCommentSTART">/*</div>
<div class="line">This text will be commented NO:2</div>
<div class="line">This text will be commented NO:2</div>
<div class="line">This text will be commented NO:2</div>
<div class="line multiLineCommentEND">*/</div>

Css rule:

.multiLineCommentSTART ~ .line{
font-style:italic !important;
opacity:0.33 !important;
}

.multiLineCommentEND ~ .line{
font-style:normal !important;
opacity:1 !important;
}

It works for the first group of "/*" and "*/" but not for preceeding ones. I mean it works for "This text will be commented NO:1" part but not for "This text will be commented NO:2" part. Without using "!important", the result is the same.

Answer 1

Try this css instead

.multiLineCommentSTART~.line {
    font-style: italic;
    opacity: 0.33;
}

.multiLineCommentSTART {
    font-style: normal !important;
    opacity: 1 !important;
}

.multiLineCommentEND {
    font-style: normal !important;
    opacity: 1 !important;
}

When you hit the "end" you should simply put it back to normal... Same with the "start". Now you need to change only the "div.line" contained in the "div.multiLineCommentSTART"