| 
									
										
										
										
											2018-10-12 16:00:59 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: CSS3 Nth Child Selector | 
					
						
							|  |  |  | localeTitle: CSS3 N-й детский селектор | 
					
						
							|  |  |  | --- | 
					
						
							| 
									
										
										
										
											2018-11-06 19:12:04 +02:00
										 |  |  | ## CSS3 Nth Child селектор
 | 
					
						
							| 
									
										
										
										
											2018-10-12 16:00:59 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-11-06 19:12:04 +02:00
										 |  |  | Селектор `nth-child` - это превдокласс, находит один или более элементов, основываясь на их позиции среди группы соседних элементов. | 
					
						
							| 
									
										
										
										
											2018-10-12 16:00:59 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ## Синтаксис
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | \`\` \`CSS a: nth-child (pattern) { / \* Css идет здесь \* / } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | ### Pattern 
 | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  The patterns accepted by `nth-child` can come in the form of keywords or an equation of the form An+B.  | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  #### Keywords  | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  ##### Odd  | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  Odd returns all odd elements of a given type.  | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-02-20 04:02:03 -05:00
										 |  |  | CSS a: nth-child (нечетный) { / \* CSS идет здесь \* / } | 
					
						
							| 
									
										
										
										
											2018-10-12 16:00:59 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | ##### Even 
 | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  Even returns all even elements of a given type.  | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-02-20 04:02:03 -05:00
										 |  |  | CSS a: nth-child (even) { / \* CSS идет здесь \* / } | 
					
						
							| 
									
										
										
										
											2018-10-12 16:00:59 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | #### An+B 
 | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0).  | 
					
						
							|  |  |  |   | 
					
						
							|  |  |  |  For example, the following will match every 3rd anchor element:  | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-02-20 04:02:03 -05:00
										 |  |  | CSS a: nth-child (3n) { / \* CSS идет здесь \* / } \`\` \` | 
					
						
							| 
									
										
										
										
											2018-10-12 16:00:59 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ### Дополнительная информация:
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-11-06 19:12:04 +02:00
										 |  |  | [Документация MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child) [CSS-трюки - n-й дочерний селектор](https://css-tricks.com/almanac/selectors/n/nth-child/) [CSS Tricks - n-й детский тестер](https://css-tricks.com/examples/nth-child-tester/) [W3Scools - n-й дочерний селектор](https://www.w3schools.com/cssref/sel_nth-child.asp) |