Следующее содержится в теории:
a:visited { … }
li:last-child { … }
.alert:hover { … }
В практике работает иначе:
a: visited { … }
li: last-child { … }
.alert: hover { … }
Прошу обратить внимание на изменения: появился пробел. Псевдоклассы работают только, насколько я понял, по следующей формуле: селектор: псевдокласс.
Соответственно, прошу подпилить теорию, потому что учащиеся верстке из-за этого попадают в тупик.
Вы не правы. Не запутывайте других. А лучше покажите, как вы пишите свойства в этом задании.
дабы не создавать новую тему…
вопрос, почему эти 2 варианта вносят кардинально разный результат?
ul :first-child { /* закрасит первую мишень*/
background-color: red;
}
ul:first-child { /* закрасит фон, а не мишени*/
background-color: red;
}
разница лишь в одном пробеле.
жесткий синтаксис относительно пробела и first-child:
пробел есть перед двоеточием -> дочерний элемент;
пробела нету -> к самому родительскому элементу
пробел есть после двоеточия -> вообще не работает.(ul: first-child { })
… и last-child:
пробел есть перед двоеточием -> дочерний элемент;
пробела нету -> вообще не работает.
все верно?
А почему для :last-child без пробела вообще не работает?
код из задания:
Перепроверил, верно, без пробела и first-child и last-child имеют одинаковый результат
(закрашивается фон, вместо мишени)
проверял так:
ul:last-child
/*ul:first-child*/
{
background-color: red;
}
Ваш комментарий в аналогичной теме:
итог… нифига не понял (((
Все, дошло.
Спасибо
.target li { background-color: white; }
ul :first-child { background-color: red; }
li:last-child { background-color: yellow; }
и все-таки вариант селектор:nth-child(n) не работает без пробела после селектора!!!
в теории ошибка получается!?
такая же ерунда в 10/18
Нет ошибки в теории. И не было.
Прикрепите ссылку на задание и отправьте код, который вы пишете.
10/18
код работает при таком раскладе:
li {
background-color: white;
}
ul :nth-child(3) {
background-color: red;
}
ul :nth-child(4) {
background-color: red;
}
если убираю пробелы перед :, то сразу стили выключаются(((
Никакой магии)
Вы пользуетесь сокращенной записью.
Полная запись будет такой:
ul li:nth-child(4) { ... }
где можно побольше и поточнее узнать об этих магических финтах?)))
Каких именно?
конкретно вот этот момент. а то как-то тут теория на этот счет скуповата (как для меня:blush:)
Псевдоклассы(:first-child, :last-child, :nth-child и тд.) относятся конкретно к тому селектору, к которому вы их применяете. Если вы пишете ul:last-child - вы выбираете последний ul из всех ul.
Когда вы пишете ul :last-child(с пробелом перед двоеточием) - вы выбираете последний дочерний элемент ul в данном случае это - li.
Теория не скуповата, а рассчитана на то, что вы будете стараться соблюдать семантичность разметки.
Я к тому, что если вы применяете :last-child к элементу списка(li), то не надо изобретать колесо, а просто напишите li:last-child.
спасибо!
