Поки :first-child націлений на перший дочірній елемент, :first-of-type зосереджується на першому екземплярі певного типу в батьківському. Оволодіння цими селекторами дає змогу створювати більш детальний і ефективний CSS, розширюючи можливості веб-дизайну.13 червня 2024 р.
Визначення та використання Селектор :first-of-type відповідає кожному елементу, який є першим дочірнім елементом певного типу свого батька. Підказка: це те саме, що :nth-of-type(1).
firstChild проти firstElementChild firstChild повертає перший дочірній вузол (вузол елемента, текстовий вузол або вузол коментаря). Пробіли між елементами також є текстовими вузлами. firstElementChild повертає перший дочірній елемент (не текст і вузли коментарів).
only-child проти only-of-type Це означає лише один елемент у цьому батьківському елементі. Навіть якщо це елемент іншого типу, він не вважатиметься єдиним дочірнім. Один елемент, без винятків! :only-of-type вибирає елемент, лише якщо він є ЄДИНИМ дочірнім елементом певного типу в батьківському елементі.
Використання :last-child дуже схоже на :last-of-type, але з однією важливою відмінністю: воно менш специфічне. :last-child намагатиметься зіставити лише останній дочірній елемент батьківського елемента, тоді як :last-of-type збігатиметься з останнім входженням зазначеного елемента, навіть якщо він не з’являється останнім у HTML.
Поки :first-child націлений на перший дочірній елемент, :first-of-type зосереджується на першому екземплярі певного типу в батьківському. Оволодіння цими селекторами дозволяє створювати більш нюансований і ефективний CSS, розширюючи можливості веб-дизайну.
X:first-of-type означає «перший дочірній елемент свого батька, який є елементом X». X:last-of-type означає «останній дочірній елемент свого батька, який є елементом X».