Изучение CSS для новичков / Урок #4 - Псевдоклассы и псевдоэлементы

При помощи CSS мы можем обращаться к состояниям и определенным частям HTML блоков. Такое может происходить за счет различных псевдоэлементов. В уроке мы научимся работать псевдоклассами и псевдоэлементами.
✅ Полезные ссылки:
🔫 Курс на сайте itProger: itproger.com/course/css/4
⏰ Тайм коды:
00:00 - Начало
01:56 - Работа с псевдоклассами
16:45 - Работа с псевдоэлементами
26:05 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[@AnderPython-tw3kp]

25:10 Друзья, важное уточнение: при p:first-of-type {text-decoration: line-through} зачеркнут на странице будет и первый объект , и также каждый первый объект в каждом . Таким образом - если у вас на странице просто пять абзацей , а также три блока с неким количеством абзацей внутри, то зачеркнуты будут первый из пяти отдельных абзацей и каждый первый абзац в каждом из трех блоков . C last-of-type то же самое по аналогии. Спасибо!

[@MikeMentzer09]

Ничего не понял но продвигаю

[@scheme_academy1]

Почему не вылезает подсказка про first -of-type???

[@moopy_sk]

Спасибо! Как раз появился вопрос по этому поводу

[@dalex5789]

И чтобы выделить лишь один р уже придется использовать классы или идентификаторы? Или есть еще псевдоэлементы?

[@user-gl2sh4ip4e]

спасибо

[@abyssi1449]

Твой курс самый информативный и понятный. Спасибо что стараешься ради нас)

[@VitalBotvi]

Офигенно подана инфа, я весь день слушаю и не устал, начал с нтмл и вот css продолжаю)

[@adamm4739]

Спасибо. Большой урок - то, что нужно!

[@qrba_games]

Спасибо за эти прекрасные уроки!

[@katekras9814]

Спасибо большое! учимся) Мне чуть-чуть не хватило общей информации: что такое псевдоклассы и псевдоэлементы, чем они отличаются и каких видов бывают. чтоб понять структуру в целом. а потом - уже детали кода. ну, это мое личное - я так соображаю "от общего к частному") погуглила, разобралась, посмотрела видео на второй раз)

[@pilipenkovlados]

все пересмотрел, спасибо за материал и что делитесь им

[@ezhepalka]

Хороший урок. Очень информативно!

[@user-kf2sp3hf8t]

спасибо за урок) к концу занятия голова кругом, тяжеловато. ну ничего, идем дальше!)

[@dmitriydobrota]

все понятно и разборчива, спасибо!

[@user-cc6og8vl9q]

A huuuuuge THANK U for your lessons, it's sooooooo easy to understand your explanations! i've learnt lots of things from your videos

[@sergejg4773]

Супер урок. Благодарю.

[@scahai0_0]

спасибо за урока😊

[@elgamer4986]

Всё ясно и четко

[@sturmes2296]

Спасибо!

[@tmprokill9973]

если у кого-то проблемы на 10:00 , то там visited должен стоять перед псевдоклассом hover, а тот в свою очередь перед active. + если вы использовали ссылку из локальных файлов( фотка,) то она автоматом будет гореть как посещённая, поэтому попробуйте с обычной ссылкой на сайт( на неё наложиться visited только после открытия, а потом т.к в истории браузера вы посещали эту ссылку, то будет определяться как visited)

[@Slash2882]

Так же добавлю (у меня только так получилось): Если хотите добавить фон в visited, то нужно сначала добавить любой фон к самой ссылке, например белый, чтоб фон поменялся в visited..

[@brawlname3422]

7:28 Можете пожалуйста подсказать (если знаете), почему у меня не получается сделать курсор в кач-ве картинки (я делал так же как и на видео)

[@user-ho8jw3eh4w]

спасибо за видео

[@nonly_cheatss]

Я смотрю только тебя .ТК ты единственный кто можешь нормально обьеснить для новичков

[@user-gs4ec4it5l]

Спасибо бро!

[@user-te4zh2dz9r]

замечательные уроки, всё по делу, ничего лишнего, автор хорошо рассказывает, но! - при переключении с редактора на страницу браузера кадр цветом(светом) резко меняется и при просмотре в вечернее время зрачки очень сильно утомляются от такой смены обстановки

[@Polinko007]

Спасибо, что помогли разобраться с псевдоклассом :first-of-type

[@user-nc2qu4ld2g]

Спасибо.

[@viktorianevyda4730]

Я надеюсь, автор заработает на своих курсах очень много) я уже прошла курс по HTML (он отличный!), также и CSS сейчас очень нравится как все показано\рассказано :)

[@itproger]

Приятно слышать! :)

[@alexvingison5659]

Какие успехи спустя год?

[@VitalBotvi]

p:first-of-type будет менять значения первой "p" находящейся в боди и первой "p" находящейся в блоке(теге) "div" к примеру.

[@Extwow]

ооо неужели у гугл хрома что то не идеально срабатывает ,ты меня радуешь еще чуть чуть и перейдешь на эдж)))))

[@shahbozhojimatov7323]

спасибо за эти уроки, они вдохновляют меня войти в мир IT

[@CentaurisNomadus]

Фронтенд - крутое начало для нас, новичков. Мне лично в средах разработки джавы было понятнее, что куда девать (файлы, т.д) а тут, код легкий, а со стороны файлов иногда может начаться бардак. Видимо, тут легко от того, что от кода до его примера работы (вот эта строка делает именно вот это, и ты это видишь - все понятно) самое малое расстояние. А в Джаве нужны графические дизайны, к ним с помощью разных классов нужно подключать функционал, а уже затем этот набор функций нужно правильно реализовывать, чтобы ничего не сломалось в программе, и чтобы пользователь точно видел и понимал, что происходит, и программист(-ка) тоже. Ну и код должен быть экономным, если это что-то большое, иначе может зависать, а тут проблема может быть со связью со стороны серверов, вообще, интернет соединения. Но тут все равно нужны базы данных, знания в них, чтобы круто сделать сайт, и добавь бэкенд с необычным функционалом - и веб мастер готов.

[@naligdehh]

Ну что, вошел?

[@SAMANUELb]

вошел в мир IT?

[@user-fs9th3sr9g]

Классно

[@ksenrix]

Спасибо за такой понятный, информативный и полезный курс который был полезен мне )

[@sextornado]

Если учите прям с полного нуля, то есть отличная книга у Эрика Фримена про изучении CSS и HTML где можно научиться создавать простенькие сайты на конкретных примерах и заданиях, а не просто заучивая различные теги просматривая видосы и так далее. И мой вам совет, не поленитесь и ознакомьтесь с ней. У вас будет более структурированное понимание о том что происходит и для чего что-либо нужно.

[@CentaurisNomadus]

Постепенно все понимаю. Иногда засиживаюсь час в программировании, частенько из-за проблем с местонахождениями файлов (это отнимает довольно много времени). А так, все в удовольствие, Джаву тоже изучаю уже 3 месяца, наконец идет его общее восприятие, когда мне понятна логика каждой строки, но пока о собственных Джава программах речи не идет, да и нужно многое здесь улаживать с графикой (вот здесь мало у меня знаний), а это отдельная история. А без нормальной графики никуда не уйдешь.

[@CentaurisNomadus]

Хотя, час, это очень мягко сказано. Я теряю из виду время на совсем, иногда)

[@berkut4502]

Как успехи сейчас?)

[@FelixX138]

круто.

[@m.0718]

порсле каждого курса я не волновался как говорил автор и смотрел следующие. сейчас я нихрена не понял но и не волнуюсь)

[@mag_nitik]

А теперь найдите хороший видеоурок с практикой верстки, например простенького лендинга. Станет понятнее)

[@m.0718]

СПАСИБО ЗА СОВЕТ!) УЖЕ ПРОБОВАЛ, НА ПРАКТИКЕ ГАРАЗДО ЛЕГЧЕ, КОГДА ЕСТЬ КАКОЕ ТО ПОНИМАНИЕ, СЕЙЧАС ПРОШЕЛ УРОКИ ДЖС ХОЧУ ВЕРСТКИ НАЙТИ С ДЖС @@mag_nitik

[@shaykhinurov]

Вот запутал )

[@Heartflamezzz]

text-decoration-color бесполезное свойство, цвет подчеркивания можно указать сразу после text-decoration. Например мы хотим чтобы было золотое нижнее подчеркивание, мы должны прописать: text-decoration: gold underline;

[@Vlad-Ra]

noiiiiiice

[@elgamer4986]

Топ

[@ob7349]

У меня уже каша в голове...Как можно столько помнить и миксовать......

[@roppeld]

Каши в голове стало меньше? Нужно ещё каждый раз повторять код, набирать его несколько раз, пытаться создать что-то на странице. Практика помогает запоминать. Плюс ещё можно от руки записать, вытаскивая инфу из головы, без подглядывания. Так ещё быстрей запомнится, помимо классического конспектирования.

[@user-bf3hb6cc9s]

В итоге своих изучений я знаю C# C C++ JQuery Python Java Ruby Swift Golang Kotlin Django C-objective, JS, PHP, SQL... Ты еще что-то про кашу говоришь?))

[@interface5900]

@@user-bf3hb6cc9s зачем?

[@aleborn2001]

@@interface5900 затем

[@epsilon6579]

@@user-bf3hb6cc9s зачем столько разных языков? Ты наверное хотел сказать знаешь максимум их основы?

[@user-zd6dv2rt2y]

Простите, у меня есть 2 вопроса, 1.А если я написал текст допустим и через text-decoration ввел underline но я хочу чтоби ета линия била не прям над текстом а чуть дальше текста, как мне ето сделать? И если я хочу чтоби над тектом и под текстом била линия как у силлки, как мне ето сделать?

[@Mykola.Voloshyn]

цілий день розбирав урок. Доречі, якщо зробири HTML and CSS поряд в одному вікні, то краще було б дивитися. А то приходиться ставити на паузу кожні 3 секунди, коли ви переключаєтеся на вкладки ці.

[@user-dm3jw9vw5p]

Подскажите пожалуйста,а как изменить цвет точек(квадратов) те что перед текстом появляются в не пронумированном списке?

[@user-dm3jw9vw5p]

@@D3agle_LTD спасибо попробую как будет возможность

[@Anatoliy1790]

super

[@elgamer4986]

Top

[@user-dh8ey6ze7m]

1 недочёт заметила при работе в Visual Studio Code если текст написан на русском а в файле указан английский, то ссыкла не будет выводиться

[@Jullioification]

А какой смысл обращаться к пустым абзацам? Или это сделали просто, чтобы было?

[@Taunfel]

Вторая половина 2023-го теперь, overline тоже работает отлично (Chrome, Win 11)

[@user-ky6on6lo3d]

Добрый день!У меня почему то,сразу после обновления страницы ссылка становилась серой!?

[@Pavel_Derevyanko]

👍

[@notcherry69]

7:27 Никак не получается установить курсор в качестве какой-либо картинки( не нашла, как иначе сделать, но как в видео у меня пока не срабатывает.

[@user-vu9qk3zs8v]

У меня тоже не получается

[@FelixX138]

есть об этом информация на сайте посвящённом этому а именно на HTML book

[@kinokpk]

это прямо javascript какой-то получается)

[@user-ud2jr7vs8t]

Очень длинный и насыщенный урок. Информация достаточно простая. Но для начинающего ну структурирована

[@MrGagulia]

На их курсах все более легче объясняется и доходчиво?

[@marazmoveh]

а псевдоэлемент можно добавлять к input?

[@vladbasov8863]

У меня сразу ссылка становиться цветом visited, как будто эту ссылку уже нажали. И как это исправить я нигде не нашел.

[@user-fd6il4we1g]

line-through лайн сру)

[@user-eh5ug6rq5d]

А что делать если к focus я хочу например при навидении сделать текст жирным что мне надо делать?

[@user-fx7wl2vr4q]

у меня проблема. Когда я пишу main_link у меня ошибка в css

[@user-rv3nw9ey3g]

на 20 минуте потерял связь)!

[@Otaky-rai]

Подскажите пожалуйста, не потеряли ли ролики свою актуальность?

[@lazguskoy9697]

нет

[@b9ka1]

подскажите ввожу заглушку lorem в атоме а она у меня появляется одной длинноооой строкой. также часто и с ссылками. как сделать стоб оно писало длину строк по размеру окна?

[@user-ke8ov7dz8m]

одновременно alt Z

[@pledger73]

разбирал урок 3 дня))) ставил неправильные одинаковые ковычки, не мог понять что не так целый день)))

[@itproger]

Зато ка приятно потом найти ошибку 😌

[@user-qi2lz6ss2x]

C input цвет не сработал, вот так правильно input[type="text"]:focus{color: red;} input[type="text"]{color: blue;}

[@Anonimus-en8kj]

Проблемы с курсором, почему нельзя сделать так чтобы курсор был как на url , .main-link:hover { cursor: url(""); } Код чет не работает когда вставляешь ссылку в url(Никакая картинка не появляется)

[@sashanavojskij5529]

пропишы запасной после скобок через кому. .main-link:hover { cursor: url(""),pointer; } если включается запасной,то проблема или в ссылке или иконка не подходит форматом,размером

[@user-md1gw5wx2y]

Привет, почему ты говоришь на 10:20, что "text-decoration: line-through;" в "visited" не срабатывет, но ведь при нажатии на ссылку и текст, они перечеркиваются. Что я не понял.Все вроде работает.

[@isidisiz8075]

Он хотел что бы после посещения/нажатия ссылки, ссылка становилась перечеркнутой, ведь там стоит псевдокласс-visited.

[@denishka2112]

Привет, у меня в этом моменте ссылка сразу без посещения стала серой и вместе с текстом перестала перечёркиваться. Пересмотрел все знаки. Всё идентично с автором и результат не тот.

[@tsmukola]

@@denishka2112 решил?

[@denishka2112]

@@tsmukola Добрый день, да, спасибо. Я разобрался и иду дальше.)))

[@tsmukola]

@@denishka2112 аа подскажи какк?) ибо я уже замучился)

[@DreamMaster_ru]

ВОПРОС. Пожалуйста помогите разобраться. У меня в index.html: Simple В main.css: .text:not(empty)::after { content: ' 123'; color:red} В браузере отображается: Simple123 123 Почему после пустого class="text" подставились "123"??

[@mnebezsaxara5622]

перед empty надо поставит двоеточие

[@mewtwo8878]

first-of-type и last-of-type почему без двух двоеточий? они не являются псевдоэлементами?

[@JakeAdvenTime]

Да, они псевдоклассы, а не псевдоэлементы

[@alexusblog45_official]

У меня в main.css, не работают команды color, cursor, text-decoration. Всё делаю как в уроке, но АТОМ как будто не видит, или ему вообще по барабану на эти команды, хотя путь я также ему дал! Что мне делать?🤷‍♂🤦‍♂😩

[@user-cg2ww3oq7f]

Я тоже не могу понять в чем дело

[@user-qf8cl7oq1l]

Проверь или после каждого свойства ты проставил точку с запятой. Тоже была такая проблема, но потом заметила, что просто забыла проставить)

[@user-xl2vp7vx8e]

Текст декорейшн с визитед сработал,текст перечёреивался.Просто это было очень быстро и автор не заметил)

[@xeither289]

☦❤❤💕🙏☦

[@qrba_games]

ТЫ ЗАБЫЛ ДОБАВИТЬ ВИДЕО ПРО CSS В ПЛЕЙЛИСТ!

[@maksimkuznetsov4498]

visited сразу отмечает ссылку как просмотреную как это исправить?

[@aguilarik2075]

Кастомный курсор не добавляется, уже все перепробовал, и слеши менял, и название файла, и его формат, и черт знает что ещё. Только тот тип курсора, который через запятую после него прописывается загружается! Даже сам текст URL серый, как будто прога с таким вообще не знакома. Вообще не врубаюсь почему у других работает, символ в символ все перепечатываю и нифига....

[@LEGENDARY192]

Браузер смени. Возможно твой просто не поддерживает это

[@shg4062]

При вводе "p:first-of-type" и "p:last-of-type" у меня также произошли изменения в "p", которые в "div" находились

[@itproger]

Так верно, ведь они в том объекте первые

[@shg4062]

@@itproger Спасибо за ответ

[@timofeis.1335]

Эх еще желательно джава скрипт учить я уже выучил основы языков html,java,python,css(мало изучено)

[@newbrunetteforhim2418]

"Часточка" 123 не появилась к пустому абзацу, ни до, ни после не появилась.

[@user-hl2el5cz8e]

как одинарные кавычки ставить для псевдоэлементов??

[@oleksandrnavoyskiy9409]

э(при англ.клав)

[@user-xl2vp7vx8e]

Я этот урок пересматриваю только из за лайн сру))

[@vlasko_da]

у меня не сработал код на выделение первого символа(( кто-то сталкивался с таким?

[@artemzhidelyov1044]

"Часточка"

[@vladyslavmaslovskyi2510]

Не совсем понятно в каких случаях пригодится псевдоэлемент ::befor & ::after

[@paradiseso2122]

у меня на школьном сайте для тестов похожая шняга, чтобы нельзя было скопировать вопрос чтобы загуглить. кстати очень бесит

[@_sh4dow_az]

у меня text-decoration не получилось хотя у меня гугл

[@efcencermars5862]

у меня проблема я пишу на sublime text 3 и не работают псевдоклассы что делать

[@erikkhokhlov4449]

такая же ситуация

[@erikkhokhlov4449]

дело в том что под них не настроены цветовые изменения и они остаются просто белыми но свои функции они выполняют цвет можно изменить в настройках

[@user-kg6vr9kg1h]

ВАРТАНДЕР

[@stivchek7039]

15:25 у которых есть п.класс, а не просто .класс, заговорился?

[@user-fo5hm5hd3w]

и они не срабатывают у меня я все проверил все точно как у тебя, но все равно связка с CSS файлом не идет. Google chrome последняя версия до этого все открыл. Можешь подсказать в чем проблема. Заранее спасибо и спасибо за видео)

[@vl1z850]

Я думал будет обучалка по кс сурс

[@defolt7]

я понял что я тупой, спасибо автор

[@ismeazey3879]

пон

[@beynertv7276]

9:46

[@limonite8925]

У меня почему то селектор id не работает

[@ahsokatano3824]

id в css пишется через #

[@user-ch2tx6ud1f]

14:14

[@daniyartulenbaev]

самый сложный урок, пока...

[@snoorkee]

Some lession

[@b9ka1]

в версии 1,60,0

[@xawer6822]

Я один подумал, что тут про кс соурс видос?

[@xeither289]

БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ

[@ClipDash5]

Ребята стоит изучать этот курс в 2024?)

[@user-ew4wi9cp3i]

может как самую такую базу - стоит, но есть гораздо лучше, но если хочешь - смотри

[@lawdriver88]

Тяжко

[@xeither289]

ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС

[@Creatif_1000]

ПОЧЕМУ У МЕНЯ НЕ РАБОТАЕТ div:hover { Background-color: blue } ПОЧЕМУ?!?! МЕНЯ ТАК БЕСИТ. ЭТО edge ТАК ПЛОХО РАБОТАЕТ ИЛИ Я ГОВНОКОДЕР И ЧТО ТО НЕ ТАК СДЕЛАЛ?

[@PlatTon618]

Может вы забыли подключить CSS-файл. Я проверил, сначала не получилось, потом заметил, что файл CSS не подключен. Потом всё сработало. Если что, вот код. HTML: Какой-то текст CSS: div { background-color: red; } div:hover { background-color: blue; } P.S. Наверное, важно, чтобы CSS- код был подключен внутри тега "head". P.P.S Если и так не сработает, то не пишите в CSS-коде ничего и подключите JS-код, в котором напишите следующее: $('div').css('background-color','red').hover( function(){ $(this).css('background-color','blue'); }, function(){ $(this).css('background-color','red'); });

[@LEGENDARY192]

Это капец. Насколько плохо что я ничего не понял?

[@scheme_academy1]

Тоже

[@trainPTT]

Ну не знаю, на мой взгляд все понятно, но выучить всё сразу очень сложно, на опыте запомнится.

[@Freddy03.03.]

Мозг взрывается