CSS псевдоклассы. Псевдокласс HOVER и другие. Уроки HTML CSS JS. Урок №10
HTML-код
- Опубликовано: 11 июл 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
Ребята, парень старается делает годный материал, почему лайков меньше чем 50% просмотров, давайте не жадничаем, поддержим автора !!! )))
Видео огонь, спасибо автору.
Спасибо большое! Было бы здорово!
Солидарен, каждое видео лайкаю с трех аккаунтов, чем могу.
Спасибо! 👍😊
Я новичок и полностью согласен
Уроки крутые и понятные, а главное интересные
да, очень обидно (я все видео лайкаю) щас ещё с двух левых аков зайду лайкну :)))
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 - Напутствие
Большое спасибо за ещё один здоровский урок!
Спасибо большое!
Все четко без воды, по теме, 25 минут полезной информации, супер) Переход с окном прикольный😂)
Спасибо большое! 👍😊
Реально мощно) все четко, без воды.
Всегда жду конца чтобы покачать головой по трэк ))) 😹
Круть)
Кстати, в 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 А, своя последовательность. Меня смутило слово "шаг". Ясно, спасибо
За info.txt отдельное спасибо!
Всегда пожалуйста!
и еще раз спасибо за обнуляющие стили
Чудовий вчитель, все дуже докладно та зрозуміло пяснює. Те, що потрібно новачку)
Дуже дякую 😊
Слава Україні блядь!
Проблема
когда пишу :hover
саблайм как будто не распознает это ,ничего не происходит после того, как написал
@@AndreLLo_o попробуй после двоеточия не ставить пробел, мб проблема в этом. Если вообще актуально)
На протяжении 2 недель смотрю ваш канал и изучаю верстку. С каждым днем занимаюсь больше и больше, потому-что как вы преподаете материал это настоящее мастерство.
привет! Очень нужна помощь с кнопкой. Не понимаю как в кнопку запихнуть картинку со стрелочкой. или там нужно просто написать стрелочку?
@@liiavard7138 на канале есть разбор прошлой домашки, где есть такая же кнопка
@@liiavard7138 там нужно два background: первый с картинкой и no-repeat с выставленными координатами, потом через запятую уже другой background с выставленным цветом
@@user-rt4kw1qu5l спасибо!))
Во, вроде, все это знал, но как-то не совсем уверенно. Посмотрел ролик - систематизировалось.
Спасибо )
Пожалуйста!
Отличные уроки. Закрепляю на них ранее пройденный мною материал. Спасибо!
Спасибо! Рад что прлезно!
Проблема
когда пишу :hover
саблайм как будто не распознает это ,ничего не происходит после того, как написал
@@AndreLLo_o Если ты это прочитаешь то, там где обнуление убери значение "none" в a:hover text-decoration.
привет! Очень нужна помощь с кнопкой. Не понимаю как в кнопку запихнуть картинку со стрелочкой. или там нужно просто написать стрелочку?
Это просто потрясающе! Спасибо Вам, автор!
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
Классный урок и курс в целом! Спасибо тебе большое Жека! Творческих успехов!
Огромная благодрность Вам за труд!!!
Удивительнее всего, что это настоящее обучение и бесплатно. Рассказываю знакомым, не верят! Тут намного интереснее, чем в различных школах. И удобнее, тк занимаешься в своем темпе, а не в по чьим-то графикам . Очередное спасибо от очередного ученика!
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
Спасибо, курс топ! Отдельная благодарность за файлы с текстовым описанием пройденной темы!
благодарен за твой труд) рад тому что ты снимаешь познавательный и полезный контент))
Спасибо большое! Все понятно и доходчиво, отдельное спасибо за методичку по background очень помогает.
Как всегда суперски!!! Спасибо )
реально очень годный контент! один из немногих которых хочется поддержать материально.
Напутствие в конце видео, всегда пересматриваю раза по 3. Спасибо большое дядь Жень!!!
Как всегда на высоте!Все понятно и это радует!10 из 10!
Спасибо!
Дякую тобі дуже за цей канал та твої ролики. У тебе точно є талант викладача. Все чітко, доступно та наглядно. Під кожним уроком файли, домашка, шпаргалки. Якщо б можна було тричі стати твоїм спонсором - я б став.
Хотів також сказати, що в цей нелегкий час, твій канал може врятувати людям життя. Через віну, справа на яку я витратив 10 років, більше не приносить прибутку. Твій канал - це мій рятувальний круг. Мій та моєї сімʼї. Ще раз дякую!
Спасибо за полезные уроки!
Замечательные уроки! Благодарю вас!!!
Контент просто пушка! Спасибо тебе, всех благ и здоровья!
Я рад! Пожалуйста!
Спасибо, очень подробно и доступно. Одним словом - ГОДНОТА!
Очень классные видео! Спасибо!!!
Очень приятная подача! Спасибо Жень!
Просто лучший! И больше нечего сказать) Спасибо большое за твои старания!
Пожалуйста!
Видео - класс!) Да, переход прикольный получился, такие моменты немного "разгружают" мозг после полученной перед этим информацией, Так что давай в том же духе!) Как всегда 10 из 10)
Спасибо большое!
каждое видео ставлю лайк смотрю с удовольствие и впитую всю информацию спасибо тебе за уроки) такого препода не хватало на уроках информатики)
огромный респект за старания.
Спасибо за видео-уроки, отлично!!))
Пожалуйста!
Выпуск очень понравился))))
Да переход прикольный!)))))
Спасибо! 👍
Урок на столько крут что пересмотрел еще раз. Спасибо!
Евгений, спасибо большое за уроки. Где еще можно найти человека, который будет так грамотно и понятно подавать информацию. Так еще и домашнее задание с макетами!
Жека, красава! Снова отличная подача материала! Доходчиво всё объяснил, так же спасибо за макеты! Мне понравилось с ними работать. Хоть и мороки много, но прибавляет опыт и практичности)
Супер! Спасибо! 😊
Какое у вас классное комьюнити! Очень рада, что нашла вас! Спасибо за полезные уроки!
Пожалуйста! Я тоже рад!
Чудесный урок! Как и все остальные! Благодарю!
Очередной шикарный,полезный,позитивный урок.
Просто лучший!
Спасибо большое за качество и подачу информации!
Пожалуйста!
Хороший материал. Супер. Спасибо за урок и за домашку!
Пожалуйста!
Евгений, Спасибо за этот Супер-курс!
Спасибо, Женя! Как всегда, доступно и понятно объяснил. Всё, побежал делать домашку.
Супер!!! Все по суті без води, одні приклади і практика. Що може бути краще.
Супер! Дякую!
Очень понравился выпуск, спасибо Жека
Пожалуйста!
Как всегда СУПЕР полезный урок!!!Спасибо вам Евгений!!!!
Класс! Очень полезно и доходчиво про псевдо-классы! Спасибо!
13:35 "Фокус-покус" действительно очень клевый - сразу видно, где надо вводить инфу. Классно!
Спасибо за труд! Очень радует домашка)
Пожалуйста!
Отличный урок. Все понятно и очень интересно! Спасибо!!!
Понимать с тобой, как работает Css просто Божественно! Очень Спасибо!!!
Огромное спасибо за проделанную работу!
Пожалуйста!
Евгений большое вам спасибо , наконец то реально толковый контент от специалиста
Пожалуйста! 🤘
Спасибо огромное за шикарную подачу материала. Все предельно понятно!!!!!
Огромное спасибо! Прекрасный курс!!! Отдельное спасибо за домашку и возможность скачать все материалы урока!
Отличный урок, спасибо за обучение. 👌👍
Пожалуйста!
Урок просто бомба!!! Всё чётенько и просто!!!
Спасибо!
Супер👍 продолжаю смотреть!)))
Отлично!
Спасибо тебе!иду уверенными шагами по твоим видеоурокам. А когда еще и домашка получается, то чувствую себя еще увереннее.
Огромной спасибо Женя.
Пожалуйста!
Это прекрасно, спасибо!!!!
Выпуск классный и информативный! Народ, больше, больше, еще больше лайков!!! Евгений делтся с нами просто сокровищем!
Спасибо тебе земеля, огромная уважуха за твой труд.
Спасибо огромное за урок) многое новое для себя выявил!
Я рад!
Очень хороший материал! Спасибо Вам большое за проделанный труд!
Пожалуйста!
Супер! Благодарю автора! Очень полезно!
Велике дякую!!! Дуже вдалий та корисний контент.
как всегда- красавчик: понятно, доступно, еще и с "домашкой"!!!!
Спасибо!
Отдельное спасибо за текстовый файл (шпаргалку)!!!
Пожалуйста!
Евгений, спасибо за проделанную работу! CSS HTML уроки с нуля.
Спасибо за такие выпуски!!
Спасибо, отлично представляете информацию.
Пожалуйста!
Огромнейший респект!!!как всегда видос на одном дыхании огромнейшнее спасибо за учебу! лучший верстальщик на Ютубе имхо! Все четко и понятно красавец!)))отдельное спасибо за телеграм канал много полезной инфы от ребят всем новичкам и не только рекомендую!!!
Спасибо большое!
Как же только ты классно всё обьясняешь, огромное спасибо тебе за твой труд, выпускай побольше видео🙏🙏🙏🙏🙏
Лучшие уроки по вёрстке что я встречал, большое спасибо автору!!! 100% лайк)
Спасибо огромное за уроки!
Пожалуйста!
Super) thanks! In my opinion, you are one of the best!
Tnx! 👍🤟
Спасибо за уроки,за столько времени никто лучше не сделал,изучаю по твоим видео,все очень понятно,спасибо!
Очень годный контент, все внятно и понятно . Теска молодец :)). Да и вобще все Жени молодцы )
Уроки просто супер. Спасибо. Кайфанул)
Спасибо!
Супер! Все четко и по теме!!
Спасибо!
Просто наслаждение смотреть столь замечательный контент! Спасибо!
Я рад!
Супер! Просто гениально понятное и чёткое изложение! ОГРОМНОЕ СПАСИБО!!!
, спасибо за контент , , все понятно и доступно изложено
Спасибо большое!
Вроде бы простые вещи, но... Повторение - мать учения! Спасибо, Жека!
Пожалуйста, это будет всегда под рукой!
Дружище, твои уроки просто бесценны!
Рад что нравится
Отличный урок. Все по полочкам. Дай Бог здоровья вам.
Наверное, второй раз что-то комментирую на ютуб. Ваш канал просто находка. Спасибо.
Я рад! Пожалуйста!
Как всегда информативно, по делу и все понятно. Спасибо! Теперь начинаю врубаться в псевдоклассы
Супер! Я рад
Спасибо! Очень доходчиво и исчерпывающе!
от такой доброй души, такой искренности я просто не могу сдержать слезы 🥺
Выпуск очень понравился. Традиционно доходчиво и ясно. Благодарю за труд.
Спасибо большое!
Очень круто, спасибо :)
Пожалуйста!
Спасибо Евгений! Отличный видос. Супер!!!