Geek Answers Handbook

Choosing half of the elements: nth-child?

Take the following code, for example:

<ul> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> </ul>

Is it possible, using :nth-child() or otherwise, to choose exactly half for all elements? The code should select the first / last two li in the above instance, and then if I increased the number li to six, it would select the first / last three.

I feel like I have to use JavaScript ...

+9
source share
3 answers

The only way to get anywhere near to pure CSS is to make a selector on nth-child(odd) or nth-child(even) . If you want exactly the last half (and not odd or even), then you have to use JavaScript / jQuery.

Using jQuery, you can get them using:

 var yourList = $("ul li"); yourList = yourList.slice(0, Math.floor(yourList.length/2));
+4
source

You can select half the elements in pure CSS ... to the point.
The only drawback is that you must know the maximum number of common items. It may be 150, but then it will not work with 151.

Here's the demo: http://jsfiddle.net/tcK3F/ (*)

Minimal CSS:

 /* selecting half or more items. Up to 6 */ li:first-child:last-child, li:nth-child(n+2):nth-last-child(-n+2), li:nth-child(n+3):nth-last-child(-n+3), li:nth-child(n+4):nth-last-child(-n+4), li:nth-child(n+5):nth-last-child(-n+5), li:nth-child(n+6):nth-last-child(-n+6) { color: white; background: darkblue; } /* selecting half or less items. Up to 6 */ li:nth-child(n+2):last-child, li:nth-child(n+3):nth-last-child(-n+2), li:nth-child(n+4):nth-last-child(-n+3), li:nth-child(n+5):nth-last-child(-n+4), li:nth-child(n+6):nth-last-child(-n+5), li:nth-child(n+7):nth-last-child(-n+6){ font-style: italic; border: 2px solid red; }

Based on an idea from:
A trick from Andre Luis and a note in a post from Lee Vero: Style elements based on counting the number of sisters . I adapted it to the need for separation.

Short description:
:nth-last-child(-n+3) will select the last 3 elements from the parent; :nth-child(n+3) will select all the elements except the first 3. Combine them, and you can select elements in pure CSS based on what follows them (or how many children are in the parent element). In addition, you will have to combine 75 of them with 74 commas if you want this trick to work with 150 elements ... :)

IE9 + compatibility (JS multi-threading exists)

(*)
The first part of the HTML code: an even number of list items; second part: odd number of list items

CSS first rule: selects the last N of 2N elements or the last N + 1/2 element of 2N + 1 and their styles in white on blue (for example: 3 elements for a total of 5 or 6).
CSS second rule: select the last N of 2N elements or the last N-1/2 elements of 2N + 1 and their styles with a red border and italics (for example: 2 elements for a total of 4 or 5)

+13
source

Examples

Create a CSS class with a style for these elements:

 .half { background-color: #18D; }

Then use jQuery to add this class to the specified set of elements:

 $(function () { var $lis = $('ul li') var length = $lis.length // Add class to first half: $lis.slice(0, Math.floor(length / 2)).addClass('first') // Add class to last half: $lis.slice(length - Math.floor(length / 2)).addClass('first') })

If you want to include an element in the middle in case of an odd number of elements, change Math.floor to Math.ceil . All features can be seen in the examples .

+1
source

More articles:


All Articles