How can I select the middle of three elements? - css

Question

I have three <li> tags in an <ul id="accordion">. I now want to select the various items via jQuery.
To select the first <li> item, we can use $("#accordion li:first").
To select the last <li> item, $("#accordion li:last") works
How can I select the middle <li> element through a jQuery selector? There is no :middle pseudo-class that I could use here.

Answer 1

You can combine two ":not" selectors so that you get all of the 'not first, and not last' elements like so:
HTML
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Javascript
$('li:not(:first-child):not(:last-child)').css('color', 'red');
Also, check the JsFiddle

Answer 2

There is no :middle selector, and this makes sense – what element would get matched when we have 4 items?
However, you can access elements by their index. Using CSS Level 3 selectors, you can use the :nth-child(…) pseudo-class:
#accordion li:nth-child(2)
The :nth-child pseudoclass can also select repeating patterns of elements, such as all even or odd childs.
jQuery additionally offers the nonstandard :eq(…) pseudoclass for indexing, which you should probably use in this case:
$("#accordion li:eq(1)") // zero-based indexing
Further reading:
:nth-child CSS documentation on MDN
:nth-child jQuery documentation
:eq jQuery documentation

Answer 3

In this mode you can count number of elements.
for example you have this :
<ul id="someId">
<li>t1</li>
<li>t2</li>
<li>t1</li>
</ul>
the you can use length to count lis
var ln =$("#someId li").length;
after that find middle of length by this code
ln = ln / 2;
then use eq function of jquery to select middle Item like this
$("#someId li:eq("+ln+")").css("border","1px solid red");
But don't forget indexing by using eq starts from 0 .
I hope my answer help you :)

Answer 4

Another way to select second element is to use adjacent sibling selector +:
$("#accordion li:first + li")
Here is a demo.
$("#accordion li:first + li").addClass('selected');
.selected {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
And here is also generic solution for arbitrary number of li elements (not only 3):
$('#accordion li ~ li:not(:last)').addClass('selected');
.selected {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>