:nth-child — разбор для новичков | CSS Боль
CSS способен на большее, чем кажется — даже такие «простые» селекторы, как :nth-child(), работают по строгой математике. В этом выпуске разбираемся, как действительно устроены формулы выбора элементов, и почему понимание an + b делает работу с вёрсткой проще и понятнее. В этом выпуске: - Как работает переменная n и почему последовательности начинаются именно так. - Формулы n, 2n, 2n+1, n+k и n+k: что они означают и как читаются. - Как выбирать каждый второй, каждый третий или элементы, начиная с определённого номера. - Выборки «до» определённого элемента через отрицательные коэффициенты. - Сложные последовательности по формуле an + b: как строить и как предсказывать результат. - Пересечения выборок: как объединить «чётные» и «начиная с 4-го». - Объединения через запятую: выбор элементов из нескольких диапазонов. - Почему odd и even — это всего лишь сокращённая запись математических выражений. Главное — перестать заучивать особые случаи и начать видеть nth-child() как простую формулу. В выпуске — наглядные визуализации, которые помогают наконец «увидеть» работу этого селектора. Статья → https://htmlacademy.ru/blog/css/nth-child-demo Telegramm-канал про «CSS Боль» → https://t.me/cssbol Таймкоды: 00:00 Введение 00:42 Структура визуализации 01:39 Простой приме 02:37 Ограничения n 03:17 Нечётные элементы 04:09 Выбор элементов до и после 05:57 Умножение n на число 07:26 Комбинированные множества 10:04 Заключение #css #frontend #webdevelopment
CSS способен на большее, чем кажется — даже такие «простые» селекторы, как :nth-child(), работают по строгой математике. В этом выпуске разбираемся, как действительно устроены формулы выбора элементов, и почему понимание an + b делает работу с вёрсткой проще и понятнее. В этом выпуске: - Как работает переменная n и почему последовательности начинаются именно так. - Формулы n, 2n, 2n+1, n+k и n+k: что они означают и как читаются. - Как выбирать каждый второй, каждый третий или элементы, начиная с определённого номера. - Выборки «до» определённого элемента через отрицательные коэффициенты. - Сложные последовательности по формуле an + b: как строить и как предсказывать результат. - Пересечения выборок: как объединить «чётные» и «начиная с 4-го». - Объединения через запятую: выбор элементов из нескольких диапазонов. - Почему odd и even — это всего лишь сокращённая запись математических выражений. Главное — перестать заучивать особые случаи и начать видеть nth-child() как простую формулу. В выпуске — наглядные визуализации, которые помогают наконец «увидеть» работу этого селектора. Статья → https://htmlacademy.ru/blog/css/nth-child-demo Telegramm-канал про «CSS Боль» → https://t.me/cssbol Таймкоды: 00:00 Введение 00:42 Структура визуализации 01:39 Простой приме 02:37 Ограничения n 03:17 Нечётные элементы 04:09 Выбор элементов до и после 05:57 Умножение n на число 07:26 Комбинированные множества 10:04 Заключение #css #frontend #webdevelopment