Почему не работает nth child

Проблема с nth-child

Спросил advokatua,
11 октября 2013

Вопрос

advokatua

Проблема с псевдоклассом nth-child.

Не могу понять каким образом он 3-ий «а» элемент воспринимает как 4-ый, а первого якобы вообще нету.

Получается так будто элемент header тоже входит в счет, но причем тут хедер если явно указано

55-ая строка CSS-ника

Может кто подсказать или направить где конкретно почитать об таком странном поведении?

Изменено 11 октября 2013 пользователем advokatua

Ссылка на комментарий

Поделиться на других сайтах

7 ответов на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Похожие публикации

Добрый день подскажите как можно решить с помощью nth-child такой вопрос. Есть таблица:

1	2
3	4
1	2
3	4

Как можно убрать(скрыть) первую ячейку в каждой четной строке? Должны скрыться все ячейки где цифра 3.
Спасибо за помощь.

Добрый день! К сути:

Есть таблица, в которой применено чередование цветов в четных/нечетных строках:
tr:nth-child(2n) td< background-color: #def;>tr:nth-child(2n+1) td< background-color: #ddf;>Чекбоксом скрываю часть строк:
#check-in:checked

* .up< display: none;>После этого чередовании цветов в строках сбивается.
Есть ли какая-либо возможность применить чередование только к тем строкам, которые отображены (т.е. display: table-row) или может есть более простые способы удалить строки с сохранением чередования цветов?
Заранее спасибо за советы!

Страница с проблемой: http://mir-kaminov.su/foto-kaminov
Суть проблемы: в фотогалерее после 2х кликов по одному изображению (увеличить и потом уменьшить картинку для просмотра) если отвести курсор в сторону — появляется оранжевая рамка на этой малой картинке.
И пропадает только после клика по пустой области сайта. Похоже на «снять выделение».
В хроме это малый прямоугольник, а в мозилле это прямоугольник во весь размер малого изображения.

Не красиво это, второй день никак не найду корень проблемы. Самоучка, и прошу сильно не ругать.

Прошу помощи,
коллеги выручайте пожалуйста, где и на что заменить код ?

Скриншот проблемы: фотка слева вверху с этой навязчивой оранжевой рамкой в точечку

Люди, вот скоро крыша съедет. Пытаюсь добиться красоты вкладок. Важно, чтобы при активации каждой вкладки текст ее шапки приобретал тот же цвет, что и линия подчеркивания, а выходит глюк и первая вкладка навечно остается в цвете #333.

a:nth-of-type(1), .m-vibor #tab3:target

a:nth-of-type(1), .m-vibor > div < padding: 0px 19px;>.m-vibor > a, .m-vibor #tab2:target

a:nth-of-type(1), .m-vibor #tab3:target

a:nth-of-type(1), .m-vibor #tab1:target

div:nth-of-type(1), .m-vibor #tab3:target

div:nth-of-type(1) < display: none; >.m-vibor > div:nth-of-type(1), .m-vibor #tab2:target

div:nth-of-type(2), .m-vibor #tab3:target

div:nth-of-type(3) < display: block;>И проблемная часть: .m-vibor > a:nth-of-type(1), .m-vibor #tab2:target

a:nth-of-type(2), .m-vibor #tab3:target

a:nth-of-type(3) < border-bottom: 1px solid #333; color: #333; >.m-vibor a:hover, .m-vibor a:active, .m-vibor a:target < color: #333; border-bottom: 1px solid #333;>Ну почему Категории остаются темнее, а их подчеркивание меняется.

Источник

nth-child (odd) не работает должным образом

Почему у каждой строки красный фон, когда я использую nth-child(odd) ?

Ожидаемый результат — каждая вторая строка будет красной. Вместо этого, как видите, все строки красные.
P.S. Умпа — моя кошка.

5 ответов

Вы должны установить класс ClientTableRow , например:

ИЗМЕНИТЬ

Как также объяснил animuson, вам нужно применить селектор :nth-child к самому элементу, а не к родительскому элементу. Имя селектора может наводить на мысль, что он применит стиль к дочерним элементам выбранного элемента, когда на самом деле стиль применяется к n-му дочернему элементу выбранного элемента по всему документу.

Кроме того, если вас беспокоит совместимость браузера, вы также можете сделать это с помощью JavaScript. Вот пример использования jQuery.

Как указано здесь BoltClock: jQuery «полифицирует: nth-child () в любом случае селектор для старых браузеров «.

В моем случае я допустил небольшую ошибку

И это работает только в лучших браузерах. IE 8 и ниже этого не понимают. Но вы можете использовать jQuery, чтобы он работал везде, или (что очень больно) добавить класс в нечетные строки.

Это тот результат, который вам нужен ?:

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

Источник

Различия между :nth-child и :nth-of-type

Хотя, конечно, в этих селекторах, есть разница.

Псевдокласс :nth-child, означачает выбрать элемент, если:

1. Этот элемент — параграф;
2. Это второй элемент одного родителя.

Псевдокласс :nth-of-type, означает:

1. Выбрать второй параграф одного родителя.

Предположим, что наша разметка изменена следующим образом:

h1 > Words / h1 >
p > Little / p >
p > Piggy / p >
/ section>

Под «Не работает» я имею ввиду, что cелектор :nth-child выбирает слово «Little» вместо «Piggy». Потому что элемент выполняет оба условия: 1) Это второй элемент родительского элемента и 2) Это параграф. Под «Продолжает работать», я имею ввиду, что селектор продолжает выбираться «Piggy», потому что это второй параграф родительского элемента.

после

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

Мне кажется :nth-of-type менее хрупкий и более полезный в целом, несмотря на это :nth-child продолжает быть основным в работе. Как часто вы думаете «Я хочу выбрать второй элемент в родительском блоке, если это параграф». Возможно иногда, но чаще вы думаете «Выбрать второй параграф» или «выбрать каждую третью строку таблицы», для этих задач больше подходит :nth-of-type (опять же, на мой взгляд).

Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании :nth-child лучше указывать его от родителя и не использовать привязку к тегу.

dl :nth- child ( 2 ) < >/* Этот вариант лучше чем */
dd :nth- child ( 2 ) < >/* этот */

Но, конечно, все зависит от конкретной ситуации.

Поддержка браузерами :nth-of-type довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Я бы сказал, если вам нужна более глубокая поддержка, то используйте jQuery (используйте селектор и применяйте класс, там где нужно), но jQuery прекратил поддержку :nth-of-type . Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин возвращающий поддержку назад.

Источник

не работает tr:nth-child(even)

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает nth-child
Почему-то не работаетnth-child(,буду благодарен если выручите)

не работает с :nth-child
Задание: подкрасить выходные дни красным цветом сделал, но если будут добавлять еще списки то не.

Nth-child+before
Всем привет, как мне найти нужный элемент и подставить Before, так не срабатывает: #menu.

Список ul, li и nth-child
Есть список (меню) http://jsfiddle.net/jvuk/Hw2Kv/5/

Не присваевается :nth-child
Вечер в хату, господа Есть вот такая разметка

Последовательность :nth-child
У меня почему то :nth-child который должен быть 1 стал вторым и причин для этого я не вижу. то.

Разноцветные блоки :nth-child()
Добрый день ребята! Помогите решить задачу если это вообще возможно. Есть контейнер в котором.

Комбинирование [attr] и :nth-child()
Имеется группа элементов с классом .block. Эта группа разделяется на 2 подгруппы: • Элементы с.

Источник

Nth-child и nth-of-type

:nth-child — один из моих самых любимых селекторов, потому что с помощью него можно делать клевые разноцветные штуки собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.

Вот простой пример полосатых таблиц:

Полоски помогают легче скользить глазами по длинной строке или столбцу, это увеличивает читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:

Или вот что можно сделать с обычным списком вроде такого:

Никаких дополнительных классов, все сделано только с помощью :nth-child :

Вот пример разноцветного дизайна для ЖЖ, где используется этот же эффект:

Если у вас есть ЖЖ, вы можете установить этот дизайн из каталога.

Как работает nth-child()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого. Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

nth-child в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры

:nth-child(3n)

Выбирает каждый 3-й элемент списка.

:nth-child(3n+1)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.

:nth-child(even) = :nth-child(2n)

(even) — ключевое слово, выбирает четные элементы списка, как если бы мы задали (2n) .

:nth-child(odd) = :nth-child(2n+1)

(odd) — ключевое слово, выбирает нечетные элементы, как если бы мы задали (2n+1) .

:nth-child(3n-1) = :nth-child(3n+2)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.

:nth-child(5) = :nth-child(0n+5)

Выберет 5-й элемент списка.

:nth-child(n+6)

Выберет все элементы начиная с 6-го.

:nth-child(-n+6)

Выберет 6 элементов с начала списка.

Сочетания селекторов

:nth-child(n+3):nth-child(-n+8)

Выберет элементы в диапазоне от 3 до 8-ми.

:nth-child(n+4):nth-child(even)

Выберет элементы начиная с 4-го, а потом выделит только четные из них.

:nth-child(3n+1):nth-child(even)

Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.

:nth-child(n+3):nth-child(-n+8):nth-child(even)

Выберет элементы с 3-го по 8-й, а затем только четные из них.

nth-of-type()

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

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

но результат будет каким-то странным (слева), и если попробовать написать то же самое, но без тега (справа) — сразу становится ясно почему:

:nth-child считает все элементы, не обращая внимания на тег, хотя показывает только те, что соответствуют заданному тегу или классу.

Чтобы выбрать только абзацы, нам потребуется другой селектор — :nth-of-type :

:nth-of-type работает также, как :nth-child , но считает только элементы заданного типа.

:nth-child удобно использовать в сочетании с Sass:

С помощью :nth-child одинаковым элементам списка заданы разноцветные рамки и разные фоновые картинки.

Используя широкие возможности этих технологий можно делать не только забавные галереи с котятами, но и прочие нарядные штуки разной степени бесполезности (нажмите Rerun, если анимация застыла):

Здесь с помощью :nth-child элементам списка помимо разноцветных градиентов задаются также задержки воспроизведения анимации, из-за чего фигуры движутся не все вместе, а волнами.

:nth-child — полезный селектор, который поможет добавить разнообразия однотипным элементам сайта и тем самым без особых усилий сделает страницу интереснее для визуального восприятия.

Источник