CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)
HTML-код
- Опубликовано: 30 сен 2024
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/Yau...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
Как же я рад, что этот курс существует - словами не передать...
Спасибо за поддержку)
За задание в конце отдельное спасибо, помогло реально разобраться!
Пожалуйста)
Чем отличаются по структуре 11 и 12 строки, почему разные баллы?
В 11 - псевдокласс, а в 12 - псевдоэлемент?
Да! У псевдокласса и псевдоэлемента разные специфичности
да
Доброе утро, Евгений. спасибо за видео. Подскажите, пожалуйста, почему 9 пункт в задании специфичность 101, а не 110? Как я понял: индификатор 100, псевдокласс :not - не считаем, класс .main - 10.
У меня уже спрашивали этот вопрос несколько раз в личной переписке.
Всё наоборот как раз-то not считается, как 1, а класс внутри него не учитывается
@@YauhenKavalchuk спасибо. Просто везде встречал такую информацию:"Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора". developer.mozilla.org/ru/docs/Web/CSS/Specificity
И калькулятор подсчёта специфичности тоже 110 выдаёт.
@@Pavlusha1Kruglik как я понял. он просто применил 1-10-100-1000 как единицу измерения. а там в документы используют 0-1-2-3. поэтому у вас не совпадает сумма. А так все верно логически вы мыслите.
@@Никита-э4ц7с ага, только лучше для наглядности в в таблице стилей поставить с not раньше , чем без него.
@@YauhenKavalchuk но ведь в таблице, которую вы приводили в одном из прошлых уроков, специфичность (вес) псевдокласс = 10. В 9 пункте id=100 + псевдокласс not = 10, итого все же 110 должно быть, разве не так?
Вот это ролик, очень объемный, спасибо автору, подача топ
Пожалуйста
А, проходили, тупанул) Я всё правильно ответил, кроме 3 и 9 вопроса, в 3 разобрался чуток загуглив, на mdn написано, что * не влияет на специфичность хотя это тег, а в 9 не пойму почему ответ 101, если , как я прочитал, псевдокласс "not()" - не влияет на специфичность, но то что внутри нём - влияет, в итоге по идее id = 100 + class = 10, 100+10 = 110, а у тебя 101, я вот не пойму , почему так?)
Посмотрите предыдущие комментарии, это описка(
класс !!)) благодарочка !!)) Очень полезное видео !! Все очень понравилось !!))
Отлично)
Приветствую, а почему на 8:30 у нас не покрасился пункт Six (каждый третий же)? Я смотрел в Opera, там все покрасилось корректно.
Хм, тут как вариант - ошибка монтажа. Не заметил и обрезал покраску элемента.
Спасибо! Супер, как всегда! Блин , оказывается с 4го хтмла много чего изменилось )
Пожалуйста
Касательно теста, а мы разве проходили уже эту тему в предыдущих 4 уроках?
Проходили
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍
Ёмко и чётко. Планируете ли вы мастер класс по образцово показательной вёрстке, Евгений?
Спасибо. Да, такое планируется. Только скорее всего будет в виде стрима
Очень хорошо объясняешь, братишка, спасибо!
Пожалуйста
Самые понятливые уроки!
👍
Понятливыми могут быть ученики, а уроки - понятные
Спасибо, я уже два дня жду это видео урок))
Пожалуйста
запятых нету в list1, list2 перед li
👍
очень классные подробные уроки!
Спасибо
Большое спасибо, курс отличный!
Пожалуйста)
Вы Учитель от Бога. Всё так чётка, ясно, интересно, увлекательно... ❤❤❤❤❤
А Javascript у Вас будет?
Спасибо за отзыв. На канале уже есть небольшой, смотрите в плейлистах. В будущем планирую его переснять
Подскажите, ошибся в 9 задании - #test:not(.main). Ведь :not() это псевдокласс и за него даётся 10, а не 1. Если его посчитать как псевдоэлемент, тогда все сходится.
Это я опечатался, в предыдущих комментариях об этом уже писали
7:52 10:40 10:50+
🤔
@@YauhenKavalchuk как вообще посчитать специфичность (я о тесте в конце)
Мега хорош, спасибо
Пожалуйста
прикольная задачка в конце) никогда не думал о подсчете важности селекторов в таком формате 😊
😁
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍
Кайфушкин
Спасибо
А какую проблему решают бефор и афтер что их создали собственно ?
Декорирование. Собственно, как и остальные CSS свойства
Почему актив плохой? Чел старается
Спасибо за поддержку
В задании пункт 12 не хватает еще одного двоеточия, иначе вес = 2 не получится...))
Синтаксис псевдо-элементов нормально воспринимается и с одним двоеточием. И вес так же должен быть 2
9:50 это опечатка? тег span закрыт дивом? div наверно нужен на 54 строке?
Да, опечатка. Должен быть span
@@YauhenKavalchuk понял)
а есть уроки про грамотную семантику и валидность?
Я таких уроков не видел, только если поискать ещё вписки конференций Макеева
Вопрос - не подскажите с чем связано разное отображение цвета на локальной машине и в интернете? цвет- #91BED5
Это может быть связано только с монитором, разная передача цветов. Но если смотрите на монике, то такого не может быть в принципе, цвета не меняются, не зависимо от того где и как их просматривают
@@YauhenKavalchuk извините за беспокойство, оказалось что у меня в интернет версии оказался другой цвет...
я вообще не понял что я должен был посчитать в этом тесте( -мораль
🤷♂️
@@YauhenKavalchuk И вообще что это за вес, зачем он нужен и как его посчитать?
сам не понял@@extremiss1134
спасибо. очень хорошо все понятно))
Пожалуйста
Ничего не понятно, что за балы в конце? Что за специфичность, пересмотрел 2 раза, об этих балах ни слова, пользуясь какой методикой вы их расставляли?
Во 2-м уроке я подробно объясняю тему специфичности, в 3-м и 4-ом уроках дополняю. Поэтому лучше всего посмотреть всё
@@YauhenKavalchuk понял, спасибо
Для продвижения.
👍
Слишком сложно)
Как есть, начнёте применять, будет проще
Спасибо за урок 🙂
Пожалуйста
Can u do it without ads bro
Sorry, but not.
@@YauhenKavalchuk though thanxs for video it is great
You’re welcome
Как всегда на высоте
Спасибо
Кто-нибудь, подскажите, правильно ли я трактую некоторые примеры из задания:
2 #main .item
Потомки тега с id #main и классом .item?
5 li.item.main
Теги li с классами item и main одновременно?
10 ul ol+li
Теги li идущие за тегом ol внутри родителя ul? Запись "ul ol+li" делает то же самое, что и "ul ol + li"?
Верно