Четверг, 31 Мая 2012 12:34

Использование nth-child

Written by 
Оцени эту запись
(3 Голоса)

Псевдокласс nth-child используется для доступа к определенному элементу набора по его порядковому номеру. В параметре псевдокласса можно указать порядковый номер начиная с нуля, или же обратиться к четным (нечетным) элементам.

 

div:nth-child(2) {margin-left: 20px;} - второй элемент набора

div:nth-child(3n) {margin-left: 20px;} - каждый третий элемент 0, 3, 6, 9...

div:nth-child(even) {margin-left: 20px;} - все четные элементы 2, 4, 6...

div:nth-child(odd) {margin-left: 20px;} - все нечетные 1, 3, 5...

 

 

С помощью nth-child можно стилизировть таблицу:

 

table tr:nth-child(even) td {background: #555;}

table tr:nth-child(odd)  td{background: #777;}

 

Так мы получим четные строки таблицы немного темнее нечетных, что даст возможность легче ориентироваться в строках, пробегая по ним курсором.

 

Рассмотрим наглядный пример использования nth-child.

 

Допустим, есть блок, в котром выводятся картинки. Расстояние между картинками 26px.

 

 

<div class="imgs_cont">

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div class="imgs_cont_child"><img src="http://kate-land.net/media/demos/demos/images/cat3.jpg"></div>

<div style="clear:left;"></div>

</div>

 

 

 

 

 

У каждой четвертой картинки отступ равен 0px. Таким образом получается, что картинки растянулись на всю длину блока с равными расстояниями между ними и без отступов по краям.

 

 

.imgs_cont .imgs_cont_child {width: 200px; float: left; margin-right: 26px; margin-bottom: 20px;}
.imgs_cont .imgs_cont_child:nth-child(4n) {margin-right: 0px;}
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов