Селектор CSS nth:child

Здравствуйте, ребята, сегодня я покажу вам использование селектора nth-child в CSS.

  • Селектор nth-child может быть использован для выбора любого количества элементов из группы элементов одного типа, или с одним классом и т.д.
  • Пример — Предположим, у нас есть 10 абзацев, созданных с помощью тега «p», и мы хотим придать каждому второму абзацу черный цвет фона. Поэтому вместо того, чтобы присваивать отдельные имена классов всем 10 элементам, мы можем присвоить всем одно имя класса и использовать это имя класса с nth-child для выбора каждого второго абзаца в этой группе.

Пример 1 — Базовая стилизация

.paragraph:nth-child(2n){
background-color:black;
color:white;
}
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Это даст черный цвет фона и белый цвет текста каждому второму абзацу в этой группе с тем же именем класса «paragraph».
  • Вы также можете выбрать тег «p» напрямую, как показано ниже
p:nth-child(2n){
background-color:black;
color:white;
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Этот подход не рекомендуется, поскольку на веб-странице будут другие теги «p», и он будет применять стилизацию ко всем тегам «p». Поэтому лучше использовать подход с именем класса.

Пример 2 — Использование nth-child с анимацией

  • Вы можете видеть, что все три элемента span имеют одинаковое имя класса, а при использовании селектора nth-child все три элемента span имеют разные стили анимации и задержки.

СПАСИБО, ЧТО ПРОВЕРИЛИ ЭТОТ ПОСТ

Вы можете связаться со мной на —
Instagram — https://www.instagram.com/supremacism__shubh/
LinkedIn — https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email — shubhmtiwri00@gmail.com

Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇👇 ^^
☕ —> https://www.buymeacoffee.com/waaduheck <—.

Также проверьте эти посты
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Оцените статью
devanswers.ru
Добавить комментарий