X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> странное поведение nth-of-type
Dikucher
Dikucher
Topic Starter сообщение 13.4.2014, 0:11; Ответить: Dikucher
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 61
Регистрация: 8.2.2013
Из: Киев
Поблагодарили: 5 раз
Репутация:   2  


Странное поведение nth-of-type
Мне нужно выбрать 2-ой элемент класса .item
Почему во втором случае работает, а в первом нет.
ссылка на jsfiddle
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 13.4.2014, 12:32; Ответить: andreykashops
Сообщение #2


WordPress is my Life..
******

Группа: Active User
Сообщений: 1426
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Dikucher, я думаю тег p не учитывается данным свойством, а div - учитывается. Нужно, чтобы в блоке со списком не было левых блочных элементов.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dikucher
Dikucher
Topic Starter сообщение 13.4.2014, 14:15; Ответить: Dikucher
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 61
Регистрация: 8.2.2013
Из: Киев
Поблагодарили: 5 раз
Репутация:   2  


andreykashops, для меня весь смысл в использовании :nth-of-type как раз и заключатеся в том, что могут быть "левые" блочные элементы. Посмотрите внимательно элемент, он как раз и работает в том случае, когда есть "левые" элементы. Вот как мне объяснили

Цитата
найти в установленных родителях непосредственных потомков типа соответствующего класса(тега) .item, т.е. в Вашем случае div


Т.е. как я понял - :nth-of-type считает не элементы класса .item, а определяет тэг, которому соответсвует класс .item ( в нашем случае div) и потом уже в своих расчетах отталкивается именно от div, и если в родители есть другие элементы div, то они тоже будет идти в рассчет.

Как по мне, это просто жесть. Если бы я хотел выбрать div, я бы написал div:nth-of-type, но ведь мне нужна выборка по классу
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 13.4.2014, 17:01; Ответить: andreykashops
Сообщение #4


WordPress is my Life..
******

Группа: Active User
Сообщений: 1426
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Попробуйте :nth-child использовать.

Хотя вряд-ли поможет, пересмотрел еще раз, может есть вариант условие выборки свойством сделать другое?

Сообщение отредактировал andreykashops - 13.4.2014, 15:01


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dikucher
Dikucher
Topic Starter сообщение 13.4.2014, 19:42; Ответить: Dikucher
Сообщение #5


Частый гость
**

Группа: User
Сообщений: 61
Регистрация: 8.2.2013
Из: Киев
Поблагодарили: 5 раз
Репутация:   2  


andreykashops, да нет. Нужно было выбирать именно как второй элемент с классом .item, вне зависимости от того, какие еще элементы есть с этим общим родителем
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 14.4.2014, 0:53; Ответить: andreykashops
Сообщение #6


WordPress is my Life..
******

Группа: Active User
Сообщений: 1426
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Dikucher, на Jq перебрать в крайнем случае и добавить нужный класс, который потом стилизировать.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Pepper
Pepper
сообщение 14.4.2014, 19:16; Ответить: Pepper
Сообщение #7


Бывалый
****

Группа: User
Сообщений: 393
Регистрация: 14.1.2011
Поблагодарили: 123 раза
Репутация:   31  


Вот цитата с сайта W3C
http://www.w3.org/wiki/CSS/Selectors/pseud...es/:nth-of-type

Цитата
The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.


Выделенная часть в целом означает, что селектор выдаст ожидаемые результаты, если предшествующие ему теги одного типа. Именно поэтому второй вариант с <p> не работает.

Чем ломать голову над такими селекторами, которые еще не везде работать будут, не проще ли в генераторе кода сделать так, чтоб к нужному элементу вешался нужный класс? Ну, это не вопрос, а просто идея.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Данные 30млн пользователей Ai.Type утекли в паблики
1 anchous 537 8.12.2017, 17:35
автор: Astralis


 



RSS Текстовая версия Сейчас: 12.12.2017, 12:58
Дизайн