Селекторът за първо дете в CSS: избор на първия елемент

Първият псевдоклас в CSS се използва за избор на първия елемент в контейнера. В този случай специфичният тип елемент не се взима предвид, само неговата позиция спрямо родителя има стойност. Има някои тънкости в работата на този селектор, който трябва да бъде разбран за правилна употреба.

Псевдокласи на CSS

Заедно с идентификатори, класове, маркери и атрибути, псевдокласите са един от типовете селектори на CSS. Тяхната черта е, че те не могат да бъдат инсталирани директно в HTML.

Примери за псевдо-класове са "първият ред в контейнера", "първата буква в думата", "първото дете на родителя". Браузърът може да открива такива елементи само след като е анализирал страницата и е съставил дървото на DOM, а в някои случаи само след изобразяването.

Присъствието на такъв механизъм в CSS ви позволява да дефинирате дизайна, който не е обвързан с HTML кода, което отваря големи възможности за дизайн.

Избиране на първия елемент

Псевдокласът на първо дете в CSS отговаря за избора на първия елемент в основния контейнер. Текстовите възли се игнорират, отчитат се само валидни маркери.

Да намерим първите елементи в две прости HTML структури.

Първият елемент
Втори елемент
Третата точка
Има само два начина да живееш. Първият - сякаш нямаше чудеса. Вторият - сякаш имаше само чудеса наоколо. Албърт Айнщайн

В резултат на това ще бъде избран първият елемент от списъка и етикетът, определящ удебения шрифт на шрифта.

Първият елемент
два начина

синтаксис

Всички псевдо-класове в CSS се определят от конкретен шаблон. Първо, главният селектор е зададен, след това желаният псевдоклас, разделен с двоеточие.

b: първо дете {текст-украса: подчертаване-}

Такова правило ще подчертае текста на първия елемент b във всеки контейнер.

Всеки иска да се промени света, но никой не иска да се промени себе си.Лео Толстой
Който знае как, той го прави, който не знае как - той учи другите.Бърнард Шоу

На екрана е очевидно, че са избрани само елементите, съответстващи на селектора на маркера b и на селектора на псевдокласа: first-child. Стилът е приложен във всеки контейнер, в този случай във всички елементи в списъка.

В допълнение към маркера, всеки друг селектор на CSS може да се използва като основен, например:

.клас: първо дете {} [alt]: първо дете {} *: първо дете {}

Често срещани грешки

Псевдокласът на първия елемент first-child в CSS избира строго маркер, който е на първо място в родителския контейнер. Дори ако елементът съвпада напълно със селектора, но не е първото дете, той няма да бъде избран.

Например вземете предишния списък с кавички и прехвърлете авторите в началото.

Лео ТолстойВсеки иска да се промени света, но никой не иска да се промени себе си.
Бърнард ШоуКойто знае как, той го прави, който не знае как - той учи другите.

Въпреки че елементът за избор на елементи остава същият, стилът CSS не се прилага, тъй като първият елемент в контейнера вече е i.

Друга грешка е игнорирането свободен край
. Това е същият HTML елемент като другите. Ако е в контейнера преди блока за търсене, селекторът CSS за първото дете не работи.

Тип счетоводство на елементите

За да избегнете такива ситуации, можете да използвате псевдокласния първи тип. Той работи по същия начин като селектора CSS за първото дете, но взема под внимание типа елемент.

b: първи тип {text-decoration: underline-}

Сега при изчислението се вземат предвид само елементите, съответстващи на селектора b.

Избиране на последния елемент

Има и псевдо класа последно дете, което работи подобно на CSS селектора първо дете, но започва да брои елементите от края на контейнера.