1/* Select the first list item */
2li:nth-child(1) { }
3
4/* Select the 5th list item */
5li:nth-child(5) { }
6
7/* Select every other list item starting with first */
8li:nth-child(odd) { }
9
10/* Select every 3rd list item starting with first */
11li:nth-child(3n) { }
12
13/* Select every 3rd list item starting with 2nd */
14li:nth-child(3n - 1) { }
15
16/* Select every 3rd child item, as long as it has class "el" */
17.el:nth-child(3) { }
1p:nth-child(2n+1){
2 background: #05ffb0;
3 border: 1px solid;
4 padding: 5px;
5}
1//https://www.sitepoint.com/comprehensive-jquery-selectors/
2<!doctype html>
3<html lang="en">
4<head>
5 <meta charset="utf-8">
6 <title>nth-child demo</title>
7 <style>
8 div {
9 float: left;
10 }
11 span {
12 color: blue;
13 }
14 </style>
15 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
16</head>
17<body>
18
19<div>
20 <ul>
21 <li>John</li>
22 <li>Karl</li>
23 <li>Brandon</li>
24 </ul>
25</div>
26<div>
27 <ul>
28 <li>Sam</li>
29 </ul>
30</div>
31<div>
32 <ul>
33 <li>Glen</li>
34 <li>Tane</li>
35 <li>Ralph</li>
36 <li>David</li>
37 </ul>
38</div>
39
40<script>
41 /*This one is a bit complex.
42 It can accept a variety of values
43 as parameter like a number greater than or equal to 1,
44 the strings even and odd or an equation like 4n+1*/
45$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
46//karl - 2nd
47//Tane - 2nd
48
49</script>
50
51
52</body>
53</html>
54