CSS псевдоклассы. Псевдокласс HOVER и другие. Уроки HTML CSS JS. Урок №10
HTML-код
- Опубликовано: 5 авг 2024
- CSS псевдоклассы. Псевдокласс HOVER и другие. Уроки HTML CSS JS. Урок №10
CSS Псевдоклассы - это некие модификаторы для наших селекторов. Чаще всего используются для применения стилей в зависимости от состояния элемента либо его положения в коде. Поговорим о CSS псевдоклассах hover, active, visited, focus. А так же о first-child, last-child, nth-child()
🔴 Весь плейлист с уроками по HTML CSS JS верстке:
• БЕСПЛАТНЫЙ курс по вер...
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle
Или качай по ссылке: fls.guru/files/tutorials/css_...
Содержание:
0:00 - Подготовка к уроку
6:24 - hover
8:56 - visited
10:22 - active
11:41 - focus
14:11 - first-child
15:45 - last-child
16:28 - nth-child
18:23 - Важные детали по first/last/nth child
21:13 - Практикуем изученое
24:33 - Домашка
25:00 - Напутствие
Спасибо Emil Chapchakchi
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
Ребята, надеюсь выпуск понравился! Тут еще пара полезных ссылок:
Чат по верстке: t.me/flschat
Instagram: instagram.com/freelancer.lifestyle
Telegram канал: t.me/freelancer_lifestyle
Facebook: facebook.com/freelancerlifestyle
Фрилансер по жизни Женя,будут выпуски по анимациям в CSS? Популярная тема в вебе.
@@kingmanhart1365 конечно
У меня при наведении на блок с hover, увеличивается блок, и слова стоящие рядом съезжают на 1 пиксель в сторону... не понимаю что не так.
Привет, у меня вопрос по домашке: Как сделать так чтобы все пункты списка менялись при наведении на список.
@@_Zexid_ Ну это просто. ul li:nth-child(numbers):hover{background:#fff;}
Для людей, которые плохо запоминают odd и even, четное не четное, просто odd(3) у него 3 буквы, значить не четное, even(4) у него 4 буквы, значить четное, мне когда-то такое подсказали и никогда больше не забывал))
это гениально))
Спасибо, так бы долго запоминал а так сразу запоминается👍
Дякую. Тепер я зможу це запам'ятати!
@MORAINE я из Украины. Оттуда откуда и автор канала.
@MORAINE should we continue our conversation in English? ;)
Вроде видеороликам уже немало времени, а бесплатного курса никто лучше так и не выпустил, огромный респект за старания.
Спасибо!
Проблема
когда пишу :hover
саблайм как будто не распознает это ,ничего не происходит после того, как написал
Полностью согласна
@@AndreLLo_o попробуй ::hover
Я вот спустя 3 года тоже начал изучать)) С такими преподавателями есть вера,что все получится,спасибо большое
Ребята, парень старается делает годный материал, почему лайков меньше чем 50% просмотров, давайте не жадничаем, поддержим автора !!! )))
Видео огонь, спасибо автору.
Спасибо большое! Было бы здорово!
Солидарен, каждое видео лайкаю с трех аккаунтов, чем могу.
Спасибо! 👍😊
Я новичок и полностью согласен
Уроки крутые и понятные, а главное интересные
да, очень обидно (я все видео лайкаю) щас ещё с двух левых аков зайду лайкну :)))
Все четко без воды, по теме, 25 минут полезной информации, супер) Переход с окном прикольный😂)
Спасибо большое! 👍😊
0:00 - Подготовка к уроку
6:24 - hover
8:56 - visited
10:22 - active
11:41 - focus
14:01 - ааа, не болей!
14:11 - first-child
15:45 - last-child
16:28 - nth-child
18:23 - Важные детали по first/last/nth child
21:13 - Практикуем изученое
24:33 - Домашка
25:00 - Напутствие
Большое спасибо за ещё один здоровский урок!
Спасибо большое!
Реально мощно) все четко, без воды.
Всегда жду конца чтобы покачать головой по трэк ))) 😹
Круть)
лучший бесплатный курс на ютубе , лучше даже чем платные
За info.txt отдельное спасибо!
Всегда пожалуйста!
и еще раз спасибо за обнуляющие стили
Чудовий вчитель, все дуже докладно та зрозуміло пяснює. Те, що потрібно новачку)
Дуже дякую 😊
Слава Україні блядь!
Проблема
когда пишу :hover
саблайм как будто не распознает это ,ничего не происходит после того, как написал
@@AndreLLo_o попробуй после двоеточия не ставить пробел, мб проблема в этом. Если вообще актуально)
Удивительнее всего, что это настоящее обучение и бесплатно. Рассказываю знакомым, не верят! Тут намного интереснее, чем в различных школах. И удобнее, тк занимаешься в своем темпе, а не в по чьим-то графикам . Очередное спасибо от очередного ученика!
Понимать материал-это одно,а вот объяснить это другим людям ПОНЯТНО-это талант.Спасибо!
Дякую тобі дуже за цей канал та твої ролики. У тебе точно є талант викладача. Все чітко, доступно та наглядно. Під кожним уроком файли, домашка, шпаргалки. Якщо б можна було тричі стати твоїм спонсором - я б став.
Хотів також сказати, що в цей нелегкий час, твій канал може врятувати людям життя. Через віну, справа на яку я витратив 10 років, більше не приносить прибутку. Твій канал - це мій рятувальний круг. Мій та моєї сімʼї. Ще раз дякую!
Во, вроде, все это знал, но как-то не совсем уверенно. Посмотрел ролик - систематизировалось.
Спасибо )
Пожалуйста!
На протяжении 2 недель смотрю ваш канал и изучаю верстку. С каждым днем занимаюсь больше и больше, потому-что как вы преподаете материал это настоящее мастерство.
привет! Очень нужна помощь с кнопкой. Не понимаю как в кнопку запихнуть картинку со стрелочкой. или там нужно просто написать стрелочку?
@@liiavard7138 на канале есть разбор прошлой домашки, где есть такая же кнопка
@@liiavard7138 там нужно два background: первый с картинкой и no-repeat с выставленными координатами, потом через запятую уже другой background с выставленным цветом
@@user-rt4kw1qu5l спасибо!))
Вроде бы простые вещи, но... Повторение - мать учения! Спасибо, Жека!
Пожалуйста, это будет всегда под рукой!
Какое у вас классное комьюнити! Очень рада, что нашла вас! Спасибо за полезные уроки!
Пожалуйста! Я тоже рад!
Кстати, в nth-child так же можно указывать в скобках свой шаг, к примеру li:nth-child(2n) для каждого второго li, li:nth-child(5n) для каждого пятого, li:nth-child(12n) для каждого двенадцатого элеманта. Иногда полезно.
Что означает "свой шаг"?
@@user-yq5hz4kz4b 6n - каждый шестой, 24n - каждый 24-й
@@self-toughstudy6635 Эт я понял, не понял для чего это
@@user-yq5hz4kz4b задачи бывают разные, может потребоваться итерировать не только парные элементы.
@@self-toughstudy6635 А, своя последовательность. Меня смутило слово "шаг". Ясно, спасибо
Отличные уроки. Закрепляю на них ранее пройденный мною материал. Спасибо!
Спасибо! Рад что прлезно!
Проблема
когда пишу :hover
саблайм как будто не распознает это ,ничего не происходит после того, как написал
@@AndreLLo_o Если ты это прочитаешь то, там где обнуление убери значение "none" в a:hover text-decoration.
привет! Очень нужна помощь с кнопкой. Не понимаю как в кнопку запихнуть картинку со стрелочкой. или там нужно просто написать стрелочку?
Видео - класс!) Да, переход прикольный получился, такие моменты немного "разгружают" мозг после полученной перед этим информацией, Так что давай в том же духе!) Как всегда 10 из 10)
Спасибо большое!
Отдельное спасибо за текстовый файл (шпаргалку)!!!
Пожалуйста!
Супер!!! Все по суті без води, одні приклади і практика. Що може бути краще.
Супер! Дякую!
Это просто потрясающе! Спасибо Вам, автор!
Напутствие в конце видео, всегда пересматриваю раза по 3. Спасибо большое дядь Жень!!!
Спасибо, курс топ! Отдельная благодарность за файлы с текстовым описанием пройденной темы!
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
реально очень годный контент! один из немногих которых хочется поддержать материально.
Чудесный урок! Как и все остальные! Благодарю!
Спасибо большое! Все понятно и доходчиво, отдельное спасибо за методичку по background очень помогает.
Спасибо, очень подробно и доступно. Одним словом - ГОДНОТА!
Понимать с тобой, как работает Css просто Божественно! Очень Спасибо!!!
Спасибо тебе!иду уверенными шагами по твоим видеоурокам. А когда еще и домашка получается, то чувствую себя еще увереннее.
13:35 "Фокус-покус" действительно очень клевый - сразу видно, где надо вводить инфу. Классно!
"Фрилансер по жизни", как всегда информативно, по делу и все понятно. Спасибо за проделанную работу.
Пожалуйста!
Огромное спасибо! Прекрасный курс!!! Отдельное спасибо за домашку и возможность скачать все материалы урока!
Евгений, спасибо большое за уроки. Где еще можно найти человека, который будет так грамотно и понятно подавать информацию. Так еще и домашнее задание с макетами!
Контент просто пушка! Спасибо тебе, всех благ и здоровья!
Я рад! Пожалуйста!
Как всегда на высоте!Все понятно и это радует!10 из 10!
Спасибо!
Спасибо, Женя! Как всегда, доступно и понятно объяснил. Всё, побежал делать домашку.
Евгений, Спасибо за этот Супер-курс!
Выпуск очень понравился. Традиционно доходчиво и ясно. Благодарю за труд.
Спасибо большое!
Просто лучший!
Спасибо большое за качество и подачу информации!
Пожалуйста!
Лучшие уроки по вёрстке что я встречал, большое спасибо автору!!! 100% лайк)
Класс! Очень полезно и доходчиво про псевдо-классы! Спасибо!
Наверное, второй раз что-то комментирую на ютуб. Ваш канал просто находка. Спасибо.
Я рад! Пожалуйста!
Огромнейший респект!!!как всегда видос на одном дыхании огромнейшнее спасибо за учебу! лучший верстальщик на Ютубе имхо! Все четко и понятно красавец!)))отдельное спасибо за телеграм канал много полезной инфы от ребят всем новичкам и не только рекомендую!!!
Спасибо большое!
Супер! Просто гениально понятное и чёткое изложение! ОГРОМНОЕ СПАСИБО!!!
Урок на столько крут что пересмотрел еще раз. Спасибо!
Просто лучший! И больше нечего сказать) Спасибо большое за твои старания!
Пожалуйста!
Как всегда информативно, по делу и все понятно. Спасибо! Теперь начинаю врубаться в псевдоклассы
Супер! Я рад
Как же только ты классно всё обьясняешь, огромное спасибо тебе за твой труд, выпускай побольше видео🙏🙏🙏🙏🙏
Просмотрел уже 10 уроков. Объяснение понятное. Очень полезный информативный файл для скачивания к каждому уроку. ОГРОМНЫЙ ПЛЮС каналу. Смотреть буду дальше. Удачи !!!
как всегда- красавчик: понятно, доступно, еще и с "домашкой"!!!!
Спасибо!
Огромной спасибо Женя.
Пожалуйста!
Евгений, спасибо за проделанную работу! CSS HTML уроки с нуля.
Спасибо за уроки,за столько времени никто лучше не сделал,изучаю по твоим видео,все очень понятно,спасибо!
Жека, красава! Снова отличная подача материала! Доходчиво всё объяснил, так же спасибо за макеты! Мне понравилось с ними работать. Хоть и мороки много, но прибавляет опыт и практичности)
Супер! Спасибо! 😊
Очень хороший материал! Спасибо Вам большое за проделанный труд!
Пожалуйста!
Огромная благодрность Вам за труд!!!
благодарен за твой труд) рад тому что ты снимаешь познавательный и полезный контент))
Хороший материал. Супер. Спасибо за урок и за домашку!
Пожалуйста!
Урок просто бомба!!! Всё чётенько и просто!!!
Спасибо!
каждое видео ставлю лайк смотрю с удовольствие и впитую всю информацию спасибо тебе за уроки) такого препода не хватало на уроках информатики)
от такой доброй души, такой искренности я просто не могу сдержать слезы 🥺
Как всегда суперски!!! Спасибо )
Евгений большое вам спасибо , наконец то реально толковый контент от специалиста
Пожалуйста! 🤘
Ну что я могу сказать, крайнее время большинство всей необходимой информации мне дает этот канал, по нему очень удобно черпать новую информацию и учиться. Мы в одно время с другом начали учить верстку , но я самостоятельно ищу инфу, а он берет с курсов full stack ( не буду уточнять школу, так наверное нельзя) и пока что могу сказать что мы наравне , хоть их и больше обучают взаимодействию ( ну и фигму я пока что там подсмотрел) . Там целая куча преподавателей , а здесь только один Евгений.
Спасибо за такую структурированную и качественную работу!
Выпуск классный и информативный! Народ, больше, больше, еще больше лайков!!! Евгений делтся с нами просто сокровищем!
Женя здравствуй! Нужна твоя помощь в разборах домашек. Никак не могу освоить Внешние и внутренние отступы, из-за чего отстаю в обучении и восприятии материала, думал сам справлюсь, но для работы над ошибками нужна помощь учителя!)) Хочу поблагодарить тебя за весь материал на твоём канале, это уйма времени!
Давая нам эти уроки ты тратишь много сил и времени, и всё же я прошу помощи.
Огромное спасибо за проделанную работу!
Пожалуйста!
Классный урок и курс в целом! Спасибо тебе большое Жека! Творческих успехов!
Как всегда СУПЕР полезный урок!!!Спасибо вам Евгений!!!!
Спасибо за видео-уроки, отлично!!))
Пожалуйста!
Super) thanks! In my opinion, you are one of the best!
Tnx! 👍🤟
Лень начинать заниматься, с силой включаю видос и сразу прикольный голос автора просто заряжает на обучение. Не знаю насколько профессионально построено обучение, но просто прикольно заниматься, за эта лайк
Лайк и коммент после минуты просмотра. Вот над чем я ломал голову во время просмотра твоих уроков, Punto Swither это то, что доктор прописал. Надеюсь уроки твои никогда не закончатся, это интересно, как смотреть Силиконовую долину, только тупизма никакого, все четко, ясно и по делу. Так держать))))
Спасибо, отлично представляете информацию.
Пожалуйста!
Я у вас больше узнаю чем на курсах,спасибо👍
Пожалуйста!
Супер-класс! Вот так просто для новичков нужно и объяснять, без лишнего. Акцентируя на главном.
Очередной шикарный,полезный,позитивный урок.
Единственное место, где я кайфую от обучения )) Классный урок, жду момента, когда понадобится это применить на практике ))
Супер! Я рад!
Спасибо за труд! Очень радует домашка)
Пожалуйста!
Да-а-а-а ! Как говорится, мастерство не купишь и не пропъёшь ! Последовательно, детально, всё продумано и подготовлено. Если я когда-нибудь этому научусь и сделаю свой сайт, то всех желающих освоить эту науку, направлю СЮДА. Женя, спасибо! А с меня - ОГРОМНЫЙ ЛАЙК
Замечательные уроки! Благодарю вас!!!
Женя! Очередной урок с тобой, как все интересно! Обучаемся, развиваемся и живем вместе с твоими уроками, такими интересными, полезными и открытыми. спасибо!
Выпуск очень понравился))))
Да переход прикольный!)))))
Спасибо! 👍
Спасибо огромное за шикарную подачу материала. Все предельно понятно!!!!!
Самый лучший годный канал, для изучения Web-программирования. 10 из 10
Спасибо огромное за урок) многое новое для себя выявил!
Я рад!
Объясняете очень доступно (не все так могут). Спасибо за урок и отдельный за info.txt
Я рад!
Просто наслаждение смотреть столь замечательный контент! Спасибо!
Я рад!
Ваши уроки помогут мне выбраться в люди.Спасибо вам огромное
Евгений! Вы великолепнейший учитель! У вас талант! С огромным удовольствием смотрю ваши видео и только восхищаюсь. Я много смотрел разных видео, вебинаров от GeekBrains и не только, на которых только слышно: му - хрю, -а -ммм, что вызывает сонливость. А у вас ясная, четкая подача материала, с разъяснением всех глубин и тонкостей. Искренне желаю вам здоровья, удачи во всех ваших проектах!
Спасибо!
Отличный урок, спасибо за обучение. 👌👍
Пожалуйста!
Отличный урок. Все по полочкам. Дай Бог здоровья вам.
Крутяк! Шукав курси, знайшов твій канал😎 спокійна подача матеріалу надихає на навчання. Дякую за таку роботу! PS: обираючи курси, раджу уточнювати, хто саме їх буде вести та просити щоб скинули відеоурок з тим викладачем. Бо реальна картина абсолютна інакша від рекламної.
Уроки просто супер. Спасибо. Кайфанул)
Спасибо!
Очень талантливый учитель. Информация усваивается отлично, а главное, интересно и не скучно слушать!
Спасибо большое! Стараюсь)
Отличные видосы пишешь, спасибо огромное!!!! И объясняешь лучше многих школ!👍👍👍