select an element "inside" the :first-child pseudo selector using CSS

Question

Good day all.

I have a problem, a structure like this:

<ul>
    <li>
        <span><span>
    </li>
    <li class="selected">
        <span><span>
    </li>
    <li class="selected">
        <span><span>
    </li>
    <li class="selected">
        <span><span>
    </li>
    <li>
        <span><span>
    </li>
</ul>

I would like to select the first and last that have selected on the parent... the pseudo code should be like this:

li.selected span { background: #FF4D6E; color: white; }
li.selected:first-child span{border-radius:30px;}
li.selected:last-child span{border-radius:30px;}

the problem is that the span is inside the collection of .selected so I would like to have the first .selected, and its span

This is not possible. There is the proposed ~ parent selector, but it is not implemented. — somethinghere
– somethinghere, Commented Oct 22, 2014 at 14:07
I do use jquery, but at this stage I must achieve this via solely CSS :/ too bad, but as always, very thanks for the help :D — Matteo Bononi 'peorthyr'
– Matteo Bononi 'peorthyr', Commented Oct 22, 2014 at 14:11
some links: stackoverflow.com/questions/2717480/… and this: stackoverflow.com/questions/5287272/… — George G
– George G, Commented Oct 22, 2014 at 14:47

Mr_Green · Accepted Answer · 2014-10-22 14:08:29Z

3

That is not possible because .selected class element is not the first of its parent. But you can do a workaround here by using sibling selectors as shown below:

/* first child */
li.selected span{
    border-radius: 30px;
}

/* middle children */
li.selected + li.selected span{
     border-radius: 0px;
}

/* last child */
li.selected ~ li.selected ~ li.selected span {
     border-radius: 30px;
}

Above code is assuming you have only three .selected elements. If you have more and you know the count then change the last child code in the above with respect to the count. For example, if you have four .selected elements.

li.selected ~ li.selected ~ li.selected ~ li.selected span {     
     border-radius: 30px;
}

Example Fiddle

answered Oct 22, 2014 at 14:08

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matteo Bononi 'peorthyr' Over a year ago

unluckily... this will be dynamic, so no way to know how many they will be :(

Matteo Bononi 'peorthyr' Over a year ago

i'll accept your answer bcouse at least it shows a workaround :D

Mr_Green Over a year ago

@MatteoBononi'peorthyr' hey thank you man... you make me 10k :D

Edward Manda · Accepted Answer · 2014-10-22 14:19:09Z

0

If you are using jQuery then do this:

$("li.selected span").css("background" : "#FF4D6E", "color" : "#fff");

$("li.selected:first-child span").css("border-radius" : "30px");

$("li.selected:last-child span").css("border-radius" : "30px");

answered Oct 22, 2014 at 14:19

Edward Manda

5893 silver badges7 bronze badges

Comments

Goodword · Accepted Answer · 2014-10-22 14:19:14Z

0

To do this, I recommend taking a few hours to learn jquery. Here is a link to a good jquery tutorial. You can finish this tutorial in about three hours.

Jquery allows you to dynamically select any element that you want and modify it in pretty much any way you can imagine.

This is the code I would use to modify the CSS of the first and last span elements with .selected parents:

var $childOfSelected = $('.selected').children('span')

$childOfSelected.last().css({'border-radius':'30px'});
$childOfSelected.first().css({'border-radius':'30px'});

answered Oct 22, 2014 at 14:19

Goodword

1,64520 silver badges28 bronze badges

Comments

Bojan Petkovski · Accepted Answer · 2014-10-22 14:36:46Z

0

For the first child you can use this

li.selected span {
  background: #FF4D6E;
  color: white;
}
.selected:first-child,
:not(.selected) + .selected span {
  border-radius: 30px;
}

<ul>
    <li>
        <span>not</span>
    </li>
    <li class="selected">
        <span>selected</span>
    </li>
    <li class="selected">
        <span>selected</span>
    </li>
    <li class="selected">
        <span>selected</span>
    </li>
    <li>
        <span>not</span>
    </li>
</ul>

answered Oct 22, 2014 at 14:36

Bojan Petkovski

6,9511 gold badge27 silver badges36 bronze badges

Collectives™ on Stack Overflow

select an element "inside" the :first-child pseudo selector using CSS

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related