Question

not so long ago i found out that you can do this in css ( the use of “>” ) :

#viewCounterFix > .hourMinSec > .hour > .devider ,
#viewCounterFix > .hourMinSec > .min > .devider ,
#viewCounterFix > .hourMinSec > .sec > .devider{
    left: 24px;
}

Now , in the example above as you can see , i need the exact same thing and the only diference is .hour, .min, .sec .

I was wondering if there is a shorter way to do this ?
Maybe something like:

#viewCounterFix > .hourMinSec > [.sec or .min or .hour] > .devider{
    left: 24px;
}

So does such syntax exist ?

EDIT :
Here is the full structure

<div class="hourMinSec">
    <div class="hour">
        <span class="leftHour">1</span><div class="devider"></div><span class="rightHour">1</span>
    </div>
    <img class="leftClockDots" src="/bids/images/dots.png">
    <div class="min">
        <span class="leftMin">3</span><div class="devider"></div><span class="rightMin">5</span>
    </div>
    <img class="rightClockDots" src="/bids/images/dots.png">
    <div class="sec">
        <span class="leftSec">0</span><div class="devider"></div><span class="rightSec">1</span>
    </div>
    <span class="time"><span class="hourText">hour</span><span class="minText">min</span><span class="secText">sec</span></span>
</div>

Answer 1

With standard CSS, your method is the best option.

It is not possible to have a vary of classes in the middle of a CSS rule.

However, if .sec, .min, .hour are the only elements which will be in .hourMinSec, you could ommit this from your CSS rule:

#viewCounterFix > .hourMinSec .devider {
    left: 24px;
}