CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)
ฝัง
- เผยแพร่เมื่อ 22 พ.ย. 2024
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/Yau...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ TH-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
![[MV] A leap of faith...ความเชื่อใจครั้งสุดท้าย (From "Petrichor the series")](http://i.ytimg.com/vi/U1piZH2CNXA/mqdefault.jpg)
Как же я рад, что этот курс существует - словами не передать...
Спасибо за поддержку)
За задание в конце отдельное спасибо, помогло реально разобраться!
Пожалуйста)
Вот это ролик, очень объемный, спасибо автору, подача топ
Пожалуйста
прикольная задачка в конце) никогда не думал о подсчете важности селекторов в таком формате 😊
😁
Самые понятливые уроки!
👍
Понятливыми могут быть ученики, а уроки - понятные
очень классные подробные уроки!
Спасибо
Очень хорошо объясняешь, братишка, спасибо!
Пожалуйста
Спасибо! Супер, как всегда! Блин , оказывается с 4го хтмла много чего изменилось )
Пожалуйста
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍
класс !!)) благодарочка !!)) Очень полезное видео !! Все очень понравилось !!))
Отлично)
Большое спасибо, курс отличный!
Пожалуйста)
Спасибо, я уже два дня жду это видео урок))
Пожалуйста
Мега хорош, спасибо
Пожалуйста
Спасибо за урок 🙂
Пожалуйста
Как всегда на высоте
Спасибо
Кайфушкин
Спасибо
спасибо. очень хорошо все понятно))
Пожалуйста
Почему актив плохой? Чел старается
Спасибо за поддержку
Вы Учитель от Бога. Всё так чётка, ясно, интересно, увлекательно... ❤❤❤❤❤
А Javascript у Вас будет?
Спасибо за отзыв. На канале уже есть небольшой, смотрите в плейлистах. В будущем планирую его переснять
Доброе утро, Евгений. спасибо за видео. Подскажите, пожалуйста, почему 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 должно быть, разве не так?
Ёмко и чётко. Планируете ли вы мастер класс по образцово показательной вёрстке, Евгений?
Спасибо. Да, такое планируется. Только скорее всего будет в виде стрима
Чем отличаются по структуре 11 и 12 строки, почему разные баллы?
В 11 - псевдокласс, а в 12 - псевдоэлемент?
Да! У псевдокласса и псевдоэлемента разные специфичности
да
Касательно теста, а мы разве проходили уже эту тему в предыдущих 4 уроках?
Проходили
В задании пункт 12 не хватает еще одного двоеточия, иначе вес = 2 не получится...))
Синтаксис псевдо-элементов нормально воспринимается и с одним двоеточием. И вес так же должен быть 2
Приветствую, а почему на 8:30 у нас не покрасился пункт Six (каждый третий же)? Я смотрел в Opera, там все покрасилось корректно.
Хм, тут как вариант - ошибка монтажа. Не заметил и обрезал покраску элемента.
А, проходили, тупанул) Я всё правильно ответил, кроме 3 и 9 вопроса, в 3 разобрался чуток загуглив, на mdn написано, что * не влияет на специфичность хотя это тег, а в 9 не пойму почему ответ 101, если , как я прочитал, псевдокласс "not()" - не влияет на специфичность, но то что внутри нём - влияет, в итоге по идее id = 100 + class = 10, 100+10 = 110, а у тебя 101, я вот не пойму , почему так?)
Посмотрите предыдущие комментарии, это описка(
Для продвижения.
👍
9:50 это опечатка? тег span закрыт дивом? div наверно нужен на 54 строке?
Да, опечатка. Должен быть span
@@YauhenKavalchuk понял)
Подскажите, ошибся в 9 задании - #test:not(.main). Ведь :not() это псевдокласс и за него даётся 10, а не 1. Если его посчитать как псевдоэлемент, тогда все сходится.
Это я опечатался, в предыдущих комментариях об этом уже писали
а есть уроки про грамотную семантику и валидность?
Я таких уроков не видел, только если поискать ещё вписки конференций Макеева
7:52 10:40 10:50+
🤔
@@YauhenKavalchuk как вообще посчитать специфичность (я о тесте в конце)
Вопрос - не подскажите с чем связано разное отображение цвета на локальной машине и в интернете? цвет- #91BED5
Это может быть связано только с монитором, разная передача цветов. Но если смотрите на монике, то такого не может быть в принципе, цвета не меняются, не зависимо от того где и как их просматривают
@@YauhenKavalchuk извините за беспокойство, оказалось что у меня в интернет версии оказался другой цвет...
А какую проблему решают бефор и афтер что их создали собственно ?
Декорирование. Собственно, как и остальные CSS свойства
запятых нету в list1, list2 перед li
👍
Кто-нибудь, подскажите, правильно ли я трактую некоторые примеры из задания:
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"?
Верно
Can u do it without ads bro
Sorry, but not.
@@YauhenKavalchuk though thanxs for video it is great
You’re welcome
Слишком сложно)
Как есть, начнёте применять, будет проще
я вообще не понял что я должен был посчитать в этом тесте( -мораль
🤷♂️
@@YauhenKavalchuk И вообще что это за вес, зачем он нужен и как его посчитать?
сам не понял@@extremiss1134
Ничего не понятно, что за балы в конце? Что за специфичность, пересмотрел 2 раза, об этих балах ни слова, пользуясь какой методикой вы их расставляли?
Во 2-м уроке я подробно объясняю тему специфичности, в 3-м и 4-ом уроках дополняю. Поэтому лучше всего посмотреть всё
@@YauhenKavalchuk понял, спасибо
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍