Изучение CSS для новичков / Урок #4 - Псевдоклассы и псевдоэлементы
2024 ж. 10 Мам.
155 041 Рет қаралды
При помощи CSS мы можем обращаться к состояниям и определенным частям HTML блоков. Такое может происходить за счет различных псевдоэлементов. В уроке мы научимся работать псевдоклассами и псевдоэлементами.
✅ Полезные ссылки:
🔫 Курс на сайте itProger: itproger.com/course/css/4
⏰ Тайм коды:
00:00 - Начало
01:56 - Работа с псевдоклассами
16:45 - Работа с псевдоэлементами
26:05 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - vk.com/prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼💻
- Все уроки по хештегу #itprogerLessons
25:10 Друзья, важное уточнение: при p:first-of-type {text-decoration: line-through} зачеркнут на странице будет и первый объект , и также каждый первый объект в каждом . Таким образом - если у вас на странице просто пять абзацей , а также три блока с неким количеством абзацей внутри, то зачеркнуты будут первый из пяти отдельных абзацей и каждый первый абзац в каждом из трех блоков . C last-of-type то же самое по аналогии. Спасибо!
Ничего не понял но продвигаю
Почему не вылезает подсказка про first -of-type???
Спасибо! Как раз появился вопрос по этому поводу
И чтобы выделить лишь один р уже придется использовать классы или идентификаторы? Или есть еще псевдоэлементы?
спасибо
Твой курс самый информативный и понятный. Спасибо что стараешься ради нас)
Спасибо за эти прекрасные уроки!
Спасибо. Большой урок - то, что нужно!
Офигенно подана инфа, я весь день слушаю и не устал, начал с нтмл и вот css продолжаю)
все пересмотрел, спасибо за материал и что делитесь им
все понятно и разборчива, спасибо!
Хороший урок. Очень информативно!
Спасибо большое! учимся) Мне чуть-чуть не хватило общей информации: что такое псевдоклассы и псевдоэлементы, чем они отличаются и каких видов бывают. чтоб понять структуру в целом. а потом - уже детали кода. ну, это мое личное - я так соображаю "от общего к частному") погуглила, разобралась, посмотрела видео на второй раз)
Супер урок. Благодарю.
спасибо за урок) к концу занятия голова кругом, тяжеловато. ну ничего, идем дальше!)
Всё ясно и четко
Спасибо!
спасибо за урока😊
спасибо за видео
Спасибо.
если у кого-то проблемы на 10:00 , то там visited должен стоять перед псевдоклассом hover, а тот в свою очередь перед active. + если вы использовали ссылку из локальных файлов( фотка,) то она автоматом будет гореть как посещённая, поэтому попробуйте с обычной ссылкой на сайт( на неё наложиться visited только после открытия, а потом т.к в истории браузера вы посещали эту ссылку, то будет определяться как visited)
Так же добавлю (у меня только так получилось): Если хотите добавить фон в visited, то нужно сначала добавить любой фон к самой ссылке, например белый, чтоб фон поменялся в visited..
7:28 Можете пожалуйста подсказать (если знаете), почему у меня не получается сделать курсор в кач-ве картинки (я делал так же как и на видео)
Спасибо бро!
Я смотрю только тебя .ТК ты единственный кто можешь нормально обьеснить для новичков
A huuuuuge THANK U for your lessons, it's sooooooo easy to understand your explanations! i've learnt lots of things from your videos
замечательные уроки, всё по делу, ничего лишнего, автор хорошо рассказывает, но! - при переключении с редактора на страницу браузера кадр цветом(светом) резко меняется и при просмотре в вечернее время зрачки очень сильно утомляются от такой смены обстановки
Я надеюсь, автор заработает на своих курсах очень много) я уже прошла курс по HTML (он отличный!), также и CSS сейчас очень нравится как все показано\рассказано :)
Приятно слышать! :)
Какие успехи спустя год?
p:first-of-type будет менять значения первой "p" находящейся в боди и первой "p" находящейся в блоке(теге) "div" к примеру.
спасибо за эти уроки, они вдохновляют меня войти в мир IT
Фронтенд - крутое начало для нас, новичков. Мне лично в средах разработки джавы было понятнее, что куда девать (файлы, т.д) а тут, код легкий, а со стороны файлов иногда может начаться бардак. Видимо, тут легко от того, что от кода до его примера работы (вот эта строка делает именно вот это, и ты это видишь - все понятно) самое малое расстояние. А в Джаве нужны графические дизайны, к ним с помощью разных классов нужно подключать функционал, а уже затем этот набор функций нужно правильно реализовывать, чтобы ничего не сломалось в программе, и чтобы пользователь точно видел и понимал, что происходит, и программист(-ка) тоже. Ну и код должен быть экономным, если это что-то большое, иначе может зависать, а тут проблема может быть со связью со стороны серверов, вообще, интернет соединения. Но тут все равно нужны базы данных, знания в них, чтобы круто сделать сайт, и добавь бэкенд с необычным функционалом - и веб мастер готов.
Ну что, вошел?
вошел в мир IT?
ооо неужели у гугл хрома что то не идеально срабатывает ,ты меня радуешь еще чуть чуть и перейдешь на эдж)))))
порсле каждого курса я не волновался как говорил автор и смотрел следующие. сейчас я нихрена не понял но и не волнуюсь)
А теперь найдите хороший видеоурок с практикой верстки, например простенького лендинга. Станет понятнее)
СПАСИБО ЗА СОВЕТ!) УЖЕ ПРОБОВАЛ, НА ПРАКТИКЕ ГАРАЗДО ЛЕГЧЕ, КОГДА ЕСТЬ КАКОЕ ТО ПОНИМАНИЕ, СЕЙЧАС ПРОШЕЛ УРОКИ ДЖС ХОЧУ ВЕРСТКИ НАЙТИ С ДЖС @@mag_nitik
Постепенно все понимаю. Иногда засиживаюсь час в программировании, частенько из-за проблем с местонахождениями файлов (это отнимает довольно много времени). А так, все в удовольствие, Джаву тоже изучаю уже 3 месяца, наконец идет его общее восприятие, когда мне понятна логика каждой строки, но пока о собственных Джава программах речи не идет, да и нужно многое здесь улаживать с графикой (вот здесь мало у меня знаний), а это отдельная история. А без нормальной графики никуда не уйдешь.
Хотя, час, это очень мягко сказано. Я теряю из виду время на совсем, иногда)
Как успехи сейчас?)
Классно
Вот запутал )
1 недочёт заметила при работе в Visual Studio Code если текст написан на русском а в файле указан английский, то ссыкла не будет выводиться
А какой смысл обращаться к пустым абзацам? Или это сделали просто, чтобы было?
Спасибо, что помогли разобраться с псевдоклассом :first-of-type
text-decoration-color бесполезное свойство, цвет подчеркивания можно указать сразу после text-decoration. Например мы хотим чтобы было золотое нижнее подчеркивание, мы должны прописать: text-decoration: gold underline;
круто.
noiiiiiice
Простите, у меня есть 2 вопроса, 1.А если я написал текст допустим и через text-decoration ввел underline но я хочу чтоби ета линия била не прям над текстом а чуть дальше текста, как мне ето сделать? И если я хочу чтоби над тектом и под текстом била линия как у силлки, как мне ето сделать?
Спасибо за такой понятный, информативный и полезный курс который был полезен мне )
7:27 Никак не получается установить курсор в качестве какой-либо картинки( не нашла, как иначе сделать, но как в видео у меня пока не срабатывает.
У меня тоже не получается
есть об этом информация на сайте посвящённом этому а именно на HTML book
Добрый день!У меня почему то,сразу после обновления страницы ссылка становилась серой!?
Если учите прям с полного нуля, то есть отличная книга у Эрика Фримена про изучении CSS и HTML где можно научиться создавать простенькие сайты на конкретных примерах и заданиях, а не просто заучивая различные теги просматривая видосы и так далее. И мой вам совет, не поленитесь и ознакомьтесь с ней. У вас будет более структурированное понимание о том что происходит и для чего что-либо нужно.
Вторая половина 2023-го теперь, overline тоже работает отлично (Chrome, Win 11)
Top
а псевдоэлемент можно добавлять к input?
Топ
На их курсах все более легче объясняется и доходчиво?
у меня проблема. Когда я пишу main_link у меня ошибка в css
ВОПРОС. Пожалуйста помогите разобраться. У меня в index.html: Simple В main.css: .text:not(empty)::after { content: ' 123'; color:red} В браузере отображается: Simple123 123 Почему после пустого class="text" подставились "123"??
перед empty надо поставит двоеточие
Очень длинный и насыщенный урок. Информация достаточно простая. Но для начинающего ну структурирована
Подскажите пожалуйста,а как изменить цвет точек(квадратов) те что перед текстом появляются в не пронумированном списке?
li { color: red; /* Цвет маркеров */ } li span { color: navy; /* Цвет текста */ } Текст Текст Либо в подключенном файле name.css Задаешь селекторам через свойства цвета.
@@D3agle_LTD спасибо попробую как будет возможность
@@user-dm3jw9vw5p Текст который в оберни к примеру в а задай цвет желаемый.
C input цвет не сработал, вот так правильно input[type="text"]:focus{color: red;} input[type="text"]{color: blue;}
это прямо javascript какой-то получается)
first-of-type и last-of-type почему без двух двоеточий? они не являются псевдоэлементами?
Да, они псевдоклассы, а не псевдоэлементы
super
👍
цілий день розбирав урок. Доречі, якщо зробири HTML and CSS поряд в одному вікні, то краще було б дивитися. А то приходиться ставити на паузу кожні 3 секунди, коли ви переключаєтеся на вкладки ці.
visited сразу отмечает ссылку как просмотреную как это исправить?
разбирал урок 3 дня))) ставил неправильные одинаковые ковычки, не мог понять что не так целый день)))
Зато ка приятно потом найти ошибку 😌
Привет, почему ты говоришь на 10:20, что "text-decoration: line-through;" в "visited" не срабатывет, но ведь при нажатии на ссылку и текст, они перечеркиваются. Что я не понял.Все вроде работает.
Он хотел что бы после посещения/нажатия ссылки, ссылка становилась перечеркнутой, ведь там стоит псевдокласс-visited.
Привет, у меня в этом моменте ссылка сразу без посещения стала серой и вместе с текстом перестала перечёркиваться. Пересмотрел все знаки. Всё идентично с автором и результат не тот.
@@denishka2112 решил?
@@tsmukola Добрый день, да, спасибо. Я разобрался и иду дальше.)))
@@denishka2112 аа подскажи какк?) ибо я уже замучился)
У меня в main.css, не работают команды color, cursor, text-decoration. Всё делаю как в уроке, но АТОМ как будто не видит, или ему вообще по барабану на эти команды, хотя путь я также ему дал! Что мне делать?🤷♂🤦♂😩
Я тоже не могу понять в чем дело
Проверь или после каждого свойства ты проставил точку с запятой. Тоже была такая проблема, но потом заметила, что просто забыла проставить)
line-through лайн сру)
"Часточка" 123 не появилась к пустому абзацу, ни до, ни после не появилась.
ТЫ ЗАБЫЛ ДОБАВИТЬ ВИДЕО ПРО CSS В ПЛЕЙЛИСТ!
Текст декорейшн с визитед сработал,текст перечёреивался.Просто это было очень быстро и автор не заметил)
У меня уже каша в голове...Как можно столько помнить и миксовать......
Каши в голове стало меньше? Нужно ещё каждый раз повторять код, набирать его несколько раз, пытаться создать что-то на странице. Практика помогает запоминать. Плюс ещё можно от руки записать, вытаскивая инфу из головы, без подглядывания. Так ещё быстрей запомнится, помимо классического конспектирования.
В итоге своих изучений я знаю C# C C++ JQuery Python Java Ruby Swift Golang Kotlin Django C-objective, JS, PHP, SQL... Ты еще что-то про кашу говоришь?))
@@user-bf3hb6cc9s зачем?
@@interface5900 затем
@@user-bf3hb6cc9s зачем столько разных языков? Ты наверное хотел сказать знаешь максимум их основы?
У меня сразу ссылка становиться цветом visited, как будто эту ссылку уже нажали. И как это исправить я нигде не нашел.
Подскажите пожалуйста, не потеряли ли ролики свою актуальность?
нет
Эх еще желательно джава скрипт учить я уже выучил основы языков html,java,python,css(мало изучено)
Не совсем понятно в каких случаях пригодится псевдоэлемент ::befor & ::after
у меня на школьном сайте для тестов похожая шняга, чтобы нельзя было скопировать вопрос чтобы загуглить. кстати очень бесит
на 20 минуте потерял связь)!
подскажите ввожу заглушку lorem в атоме а она у меня появляется одной длинноооой строкой. также часто и с ссылками. как сделать стоб оно писало длину строк по размеру окна?
одновременно alt Z
как одинарные кавычки ставить для псевдоэлементов??
э(при англ.клав)
При вводе "p:first-of-type" и "p:last-of-type" у меня также произошли изменения в "p", которые в "div" находились
Так верно, ведь они в том объекте первые
@@itproger Спасибо за ответ
у меня не сработал код на выделение первого символа(( кто-то сталкивался с таким?
у меня проблема я пишу на sublime text 3 и не работают псевдоклассы что делать
такая же ситуация
дело в том что под них не настроены цветовые изменения и они остаются просто белыми но свои функции они выполняют цвет можно изменить в настройках
☦❤❤💕🙏☦
Проблемы с курсором, почему нельзя сделать так чтобы курсор был как на url , .main-link:hover { cursor: url(""); } Код чет не работает когда вставляешь ссылку в url(Никакая картинка не появляется)
пропишы запасной после скобок через кому. .main-link:hover { cursor: url(""),pointer; } если включается запасной,то проблема или в ссылке или иконка не подходит форматом,размером
15:25 у которых есть п.класс, а не просто .класс, заговорился?
Кастомный курсор не добавляется, уже все перепробовал, и слеши менял, и название файла, и его формат, и черт знает что ещё. Только тот тип курсора, который через запятую после него прописывается загружается! Даже сам текст URL серый, как будто прога с таким вообще не знакома. Вообще не врубаюсь почему у других работает, символ в символ все перепечатываю и нифига....
Браузер смени. Возможно твой просто не поддерживает это
у меня text-decoration не получилось хотя у меня гугл
У меня почему то селектор id не работает
id в css пишется через #
Я думал будет обучалка по кс сурс
"Часточка"
Я этот урок пересматриваю только из за лайн сру))
в версии 1,60,0
ВАРТАНДЕР
и они не срабатывают у меня я все проверил все точно как у тебя, но все равно связка с CSS файлом не идет. Google chrome последняя версия до этого все открыл. Можешь подсказать в чем проблема. Заранее спасибо и спасибо за видео)
9:46
14:14
я понял что я тупой, спасибо автор
пон
Я один подумал, что тут про кс соурс видос?
Some lession
самый сложный урок, пока...
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ
Тяжко
Это капец. Насколько плохо что я ничего не понял?
Тоже
Ну не знаю, на мой взгляд все понятно, но выучить всё сразу очень сложно, на опыте запомнится.
Ребята стоит изучать этот курс в 2024?)
может как самую такую базу - стоит, но есть гораздо лучше, но если хочешь - смотри
Мозг взрывается
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС
Это конечно не программирование. Для меня больше похоже на рисование.
Видео, по всему, для новичков. Зачем так лететь? Информация интересная, но очень быстро.