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



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Непонятки с псевдоклассом nth-child
ShowPrint
ShowPrint
Topic Starter сообщение 16.2.2018, 19:36; Ответить: ShowPrint
Сообщение #1


Привет всем.
Если кто увидит, то ткните меня носом где я туплю.

Есть ряд гиперссылок (открывающих изображение в модалке), отображением которых надо "управлять" в зависимости от размера экрана.
Нарвался на засаду сразу, при вёрстке для широких экранов.
Надо оставить первые четыре, остальные убрать. Решил использовать псевдокласс nth-child.
Присвоил этим ссылкам общий класс ( imgSota ) и в css указал:

.imgSota:nth-child(n+4){display:none}

Результат: остались только две(!!!) гиперссылки, уже третья(!!!) скрылась попав под это правило.

Полез в "матчасть":
Селектор:nth-child(odd | even | <число> | <выражение>) {...}


/* опущено за ненадобностью */

<выражение> Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...  
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.



По моим расчётам при выражении n+4 должна быть следующая картина:
  • при n=0: 0+4=4

  • при n=1: 1+4=5

  • при n=2: 2+4=6

  • и т.д.


[mwhide=0]на самом деле получается что уже третья гиперссылка попадает под действие данного css-правила:
Прикрепленное изображение
[/mwhide]

Где туплю? (моск сломан)

UPD-1:
Поменял правило на

.imgSota:nth-child(n+6){display:none}

Отображается всё как надо, но получается что это "костыль" - всё равно хотелось бы понять "в чём собака порылась" и найти где накосячил, т.к. предстоит еще настройка отображения этих ссылок в @media  :(

UPD-2:
При изменении правила на 


.imgSota:nth-child(n+6){display:none}

скрылась даже самая первая гиперссылка. Почему???  :o

Понимаю что первая мысль которая напрашивается, то есть где-то ещё два элемента с таким классом, но сделал "посмотреть html-код" и проверил - нет больше элементов с таким классом.

UPD-3:
Для чистоты эксперимента попробовал изменить название класса (и в коде и в стилях) - ситуация та же самая. По всем признакам получается один из двух вариантов:

  1. неправильно понимаю синтаксис и неверно составлено правило

  2. смотри вариант 1

:(

 

UPD-4:

Как вариант нашел вариант решения воспользоваться nth-last-child (считать элементы с конца) и рабочее правило выглядит (+логично&&соответствует матчасти) так:

.imgSota:nth-last-child(-n+3){display:none}

то есть "скрыть последние три (из семи)" = "скрыть больше чем четыре".
Но лично мне как-то привычнее считать с начала, чем с конца  :huh:


Сообщение отредактировал ShowPrint - 16.2.2018, 20:48
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 17.2.2018, 0:41; Ответить: fedornabilkin
Сообщение #2


Тоже как-то тупил с этим псевдо. Не вспомню уж какая задача была, но я методом научного тыка все решил. Попробуй разные циферки в различных вариантах и обязательно найдешь нужный. А от начала или от конца смотреть, так это от задачи зависит.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 17.2.2018, 11:43; Ответить: yury_mw
Сообщение #3


( @ 16.2.2018, 22:36) *
Надо оставить первые четыре, остальные убрать. Решил использовать псевдокласс nth-child. Присвоил этим ссылкам общий класс ( imgSota ) и в css указал:
.imgSota:nth-child(n+4){display:none}
Результат: остались только две(!!!) гиперссылки, уже третья(!!!) скрылась попав под это правило.
 
Судя по всему, проблема в том, что в вашем коде на скрине 1-я ссылка является _2-ым_ дочерним элементом блока beeSota, а 1-ый элемент, с которого начинается отсчет применения вашего правила – это список ul с классом Sota.

Рабочий пример смотрим в песочнице: https://jsfiddle.net/1e1cyy5b/
Приведенный ниже код, как ему и положено, работает со всеми элементами списка imgSota, начиная с 5-ого (Т.е. скрывает их. Показывает, соответственно, первые 4):
 
<!DOCTYPE html>
<html lang="ru" >
<head>
<style>
  ul.imgSota li:nth-child(n+5){display:none}
</style>
</head>
<body>
<ul class="Sota">
  <li><a href="10.htm">Sota 1</a></li>
  <li><a href="20.htm">Sota 2</a></li>
</ul>
<ul class="imgSota">
  <li><a href="1.htm">img 1</a></li>
  <li><a href="2.htm">img 2</a></li>
  <li><a href="3.htm">img 3</a></li>
  <li><a href="4.htm">img 4</a></li>
  <li><a href="5.htm">img 5</a></li>
  <li><a href="6.htm">img 6</a></li>
  <li><a href="7.htm">img 7</a></li>
  <li><a href="8.htm">img 8</a></li>
  <li><a href="9.htm">img 9</a></li>
</ul>
</body>
</html>


Сообщение отредактировал yury - 17.2.2018, 12:22
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 17.2.2018, 14:18; Ответить: ShowPrint
Сообщение #4


fedornabilkin, костыль-то всегда найти можно, но хотелось бы понять и разобраться (понимание=опыт)  :)

yury_mw, вы имеете в виду что первый элемент (в моём случае список) тоже считается и имеет номер вне зависимости от того что у него не задан класс фигурирующий в css-правиле?

Если мои гиперссылки сделать представить отдельным списком и навесить класс (и правило) на этот список, а не на сами гиперссылки, то уверен что правило будет отрабатывать корректно. С подсчётом элементов внутри родителя всё просто и понятно.
Но мне изначально не хотелось грузить код (и стили) таким списком только ради того чтоб сгруппировать эти гиперссылки и считать их. При этом хотелось сделать код более-менее универсальным, чтоб при добавлении какого-либо потомка "перед" не приходилось автоматически править стили.
На основании
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

я решил что нумеруются (и считаются) именно элементы с заданным классом по порядку в котором они находятся в DOM, вне зависимости и без привязки к родителю(ям).

Считаете в этом ошибка?
То есть принцип "набора элементов" и работа "с набором" в css получается отличной от аналогичной работы в JS?

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


Сообщение отредактировал ShowPrint - 17.2.2018, 14:18
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 17.2.2018, 15:53; Ответить: yury_mw
Сообщение #5


(ShowPrint @ 17.2.2018, 17:18) *
Другими словами получается что nth-child считает не порядковый номер не элемента у которого есть класс (селектор), а порядковый номер потомка в родителе внутри которого встречается данный селектор? То есть мы видим селектор, находим родителя и нумеруем его потомков. При этом первый встречающийся селектор может оказаться и первым, и пятым, и десятым... Так?

Переводим на человеческий язык ваше правило

.imgSota:nth-child(n+4){display:none}

1) взять блок с неизвестным родителем (раз вы родителя явно не указываете, то берется первый, который подвернется)
2) выбрать в нем дочерние элементы согласно правилу (n+4), т.е. начиная с 4-ого включительно
3) проверить есть ли у выбранных класс imgSota и тогда применить к ним правило diplay: none

Пример
 

<!DOCTYPE html>
<html lang="ru" >
<head>
<style>
  .imgSota:nth-child(n+4){display:none}
</style>
</head>
<body>
<ul class="Sota">
<li><a href="10.htm">Sota 1</a></li>
<li><a href="20.htm">Sota 2</a></li>
</ul>
<ul>
  <li class="imgSota"><a href="1.htm">img 1</a></li>
  <li><a href="2.htm">img 2</a></li>
  <li class="imgSota"><a href="3.htm">img 3</a></li>
  <li class="imgSota"><a href="4.htm">img 4</a></li>
  <li class="imgSota"><a href="5.htm">img 5</a></li>
  <li><a href="6.htm">img 6</a></li>
  <li class="imgSota"><a href="7.htm">img 7</a></li>
  <li><a href="8.htm">img 8</a></li>
  <li><a href="9.htm">img 9</a></li>
</ul>
</body>
</html>

 
Будут скрыты элементы списка, начиная с 4-ого, в том случае, если у них есть класс imgSota.
Т.е. 4-ый, 5-ый и 7-ой получат свойство  display:none.
1, 2, 3, 6, 8 и 9 элементы свойство display:none не получат и будут показаны
 
Он же в песочнице: https://jsfiddle.net/zuw5kz6f/


Сообщение отредактировал yury - 17.2.2018, 15:58
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 19.2.2018, 11:36; Ответить: ShowPrint
Сообщение #6


yury_mw, спасибо за перевод на человеческий язык  :)
Понимание наступает.
По идее получается, что если я свои гиперссылки оберну в div с классом для которого пропишу правило, а с самих гиперссылок класс уберу, то всё должно заработать корректно.
Проверю.
Еще раз спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 19.2.2018, 15:24; Ответить: yury_mw
Сообщение #7


( @ 19.2.2018, 14:36) *
По идее получается, что если я свои гиперссылки оберну в div с классом для которого пропишу правило, а с самих гиперссылок класс уберу, то всё должно заработать корректно.

 
Да. Работать будет.
Вроде как очевидно, что для псевдокласса nth-child не важно, как называется родитель ul или div, важна нумерация потомков.

Если вас смущает список, то в моем примере он лишь для семантки + дает некое удобство при оформлении.
Естественно, можно и без него:

<div class="imgSota">
  <a href=""></a>
  <a href=""></a>
  ...
  <a href=""></a>
</div>

Пример в песочнице: https://jsfiddle.net/2vr3r9hn/


Сообщение отредактировал yury - 19.2.2018, 15:26
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 19.2.2018, 18:13; Ответить: ShowPrint
Сообщение #8


(yury @ 19.2.2018, 18:24) *
важна нумерация потомков
вот в этом вопросе и тупил, наивно полагая что потомки могут ещё фильтроваться по наличию/отсутствию класса.
Обернул в div, всё работает.

yury_mw,  в список оборачивать не решаюсь, по причине того что фактически весь контент на данной страницы так или иначе оформлен списками. Боюсь что боты ПС в плане ранжирования могут настороженно отнестись к сплошным спискам на странице. А так, да - со списками вполне комфортно и удобно работать. Вы же и научили меня с ними вольно (свободно) обращаться, ещё года 2 назад, когда я испытывал проблемы при вёрстке шапки и центрировании элементов внутри неё  :)


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 9:07

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet