:nth-child и :nth-of-type

od_lazio · November 10, 2009

Народ, кто-то может объяснить разницу между этими двумя псевдоклассами?

Поэкспериментировал, разницы не увидел. Чем конкретно они отличаются?

psywalker · November 10, 2009

Может они:?

https://developer.mozilla.org/en/CSS/:nth-child

http://www.quirksmode.org/css/nthchild.html

http://www.w3.org/TR/css3-selectors/#structural-pseudos

od_lazio · November 10, 2009

Может они:?
https://developer.mozilla.org/en/CSS/:nth-child
http://www.quirksmode.org/css/nthchild.html
http://www.w3.org/TR/css3-selectors/#structural-pseudos

спасибо, разобрался

psywalker · November 10, 2009

спасибо, разобрался

Ну а теперь мне по нашему объясни, что это такое, а то я сам то не вчитывался

Latro · June 11, 2010

ну так как работают эти фильтры, я всё понять не могу???

Edited June 11, 2010 by Latro

s0rr0w · June 11, 2010

ну так как работают эти фильтры, я всё понять не могу???

Что не понятно?

У тебя есть одноуровневый список элементов. Неважно каких.

:nth-child выберет любой элемент из этого списка по формуле an+b и присвоит ему нужный стиль.

Например, твоя формула 4n, итерация начинается с 0, то 4*0 = 0. Такого элемента нет в списке, поэтому применять стили не к чему. Следующий элемент - 4й, потом 8й и так далее.

Если твоя формула 2n+1, то на 0й итерации применять нужно к 1-му элементу, на 1й к 2*1+1 = 3-му элементу и так далее.

:nth-child от :nth-of-type отличается тем, что последний применяет формулу только для строго определенного элемента, а не для всех подряд.

SelenIT · June 12, 2010

Имхо, на примере нагляднее:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<style>
/* красит каждого третьего потомка dl, независимо от типа */
dl>*:nth-child(3n+1) { color: red; }

/* жирнит каждый третий dt и каждый третий dd отдельно */
dl>*:nth-of-type(3n+1) { font-weight: bold; }
	</style>
</head>
<body>
	<dl>
		<dt>Бесконечный цикл</dt>
		<dd>См. "бесконечный цикл"</dd>
		<dt>Рекурсия</dt>
		<dd>Способ общего определения объекта или действия через себя, с использованием ранее заданных частных определений. См. "рекурсия"</dd>
		<dt>CSS</dt>
		<dd>Каскадные таблицы стилей</dd>
		<dt>CSS3</dt>
		<dd>Собирательное название модулей CSS так называемого 3-го уровня. Разрабатываются независимо и в разном темпе.</dd>
		<dt>CSS Selectors level 3</dt>
		<dd>Один из <a href="http://www.w3.org/TR/css3-selectors/">модулей CSS</a>, описывающий селекторы.</dd>
		<dt>:nth-child</dt>
		<dd>Селектор выбора каждого n-го потомка</dd>
		<dt>:nth-of-type</dt>
		<dd>Селектор выбора каждого n-го однотипного потомка</dd>
	</dl>
</body>
</html>

psywalker · June 13, 2010

:nth-child от :nth-of-type отличается тем, что последний применяет формулу только для строго определенного элемента, а не для всех подряд.

А что значит:

только для строго определенного элемента, а не для всех подряд.

?

s0rr0w · June 13, 2010

А что значит: ?

Строго определенный элемент? Ключевое слово не строго, а определенный.

Т.е. с конкретным именем. Не Вася, Петя, Маша, а только все Пети.

psywalker · June 13, 2010

Строго определенный элемент? Ключевое слово не строго, а определенный.
Т.е. с конкретным именем. Не Вася, Петя, Маша, а только все Пети.

Понял, спасиб, пойду учить дальше.

Sign In

:nth-child и :nth-of-type

Question

od_lazio

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

od_lazio

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Latro

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information