CSS related; targetting a special li class

Question

Need a bit of help with the following situation. I've a slider who's setup is like this (simplified):

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li class="current">...</li>
        <li>...</li>
    </ul>
</div>


.slider li {opacity: 0.3;}
.slider li.center.active {opacity: 1;}
.slider li.current:first-child {opacity: 1;}  // this here doesn't work.

I can't use .slider li:nth-child(2).current {opacity: 1;} because I'm using a slider, so the number if li tags is different.

Is there another way, other than changing the li classes, to change the opacity of the first current class only.

Possible duplicate of [CSS3 selector :first-of-type with class name?](http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name) — oboshto, Mar 31 '16 at 12:44

score 2 · Accepted Answer · answered Mar 31 '16 at 12:39

2

You can use below mentioned code:

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li class="current">...</li>
        <li>...</li>
    </ul>
</div>
.slider li {opacity: 0.3;}
.slider li.center.active {opacity: 1;}
.slider li.current {opacity: 1;}
.slider li.center.active ~ li.current  {opacity: 0.3;}

answered Mar 31 '16 at 12:39

Dharmendra Bisht

290
1
5

I don't think this work if you add more element `.current` after `.center.active` – Maurizio Battaghini Mar 31 '16 at 12:55

score 0 · Answer 2 · answered Mar 31 '16 at 12:35

0

https://jsfiddle.net/1jko09xq/1/

i think you need this try this

answered Mar 31 '16 at 12:35

Zubair sadiq

500
6
23

score 0 · Answer 3 · answered Mar 31 '16 at 12:36

0

In your situation first current <li> is actually a second element of <ul> use this css

.slider li.current:nth-child(2) {opacity: 1;}

See working example :https://jsfiddle.net/yudi/a3w1bshr/

In css we need to count position with overall elements and here its a second element of <ul>

answered Mar 31 '16 at 12:36

Gaurav Aggarwal

9,809
6
36
74

I'm afraid I can't do that either. It's a slider, so the number if `li tags` can change. In the example it's the second one, but because we're dealing with a slider here, it can also be the fifth `li tag`. – kiarashi Mar 31 '16 at 12:43
in that case add this css by jquery `$('.slider li.current').eq(0).css('opacity','1');`. Jquery rule is different from css and it will consider it as a first element of `.current` – Gaurav Aggarwal Mar 31 '16 at 12:45
Thank you for letting me about this. I wasn't aware this could be possible as well. Thanks to you, I definitely want to learn jquery this year. :) – kiarashi Mar 31 '16 at 21:35

score 0 · Answer 4 · answered Mar 31 '16 at 12:37

0

You can add an additional class to the li you want to change.

HTML:

  <div class="slider">
        <ul>
            <li>...</li>
            <li class="current sliderOpacity">...</li>
                <li class="center active">...</li>
                <li class="current">...</li>
                <li>...</li>
            </ul>
        </div>

CSS:

.sliderOpacity {
opacity: 1;}

answered Mar 31 '16 at 12:37

6134548

95
1
3
15

I'm afraid I can't add an extra class. – kiarashi Mar 31 '16 at 12:41
Why couldn't you add an extra class? – 6134548 Jun 30 '16 at 12:01

score 0 · Answer 5 · answered Mar 31 '16 at 12:54

here you go sir

.slider li,
.slider ul > .current ~ .current { opacity: 0.3; }

.slider li.center.active,
.slider ul > .current { opacity: 1; }

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li class="current">...</li>
        <li>...</li>
    </ul>
</div>

CSS related; targetting a special li class

5 Answers5