ВСЁ, что нужно знать о CSS Селекторах. Типы селекторы css
ฝัง
- เผยแพร่เมื่อ 28 มี.ค. 2019
- CSS селекторы:
- разбираемся с типами
- механика работы
- примеры использования
В этом видео я вам расскажу что такое селектор класса css. Разберем css селекторы правила, виды селекторов css. Какую информацию css селектор содержит. Покажу как применять сложные селекторы css. Рассмотрим некоторые css селекторы примеры, и типы типы селекторов css. Наглядно покажу css синтаксис селекторов. Важно иметь в виду что css селектор id может быть только уникальным. Покажу вам основные селекторы css. Родительские и дочерние селекторы в css.
Не забудьте заглянуть сюда:
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
Большое спасибо! 41:33 Только так и не увидел ссылки на MDN и W3...
ждем поддержку :has() 🥳🥳🥳
*Вот таких видео не хватает на ютубе. Всё чётко и понятно, и много информации за 40 минут.
*
Обращение по:
1:22 - тегам
2:34 - классом
3:56 - ID
Обобщенные и соседне родственные комбинаторы:
10:56 - селектор '+'
12:08 - селектор '~'
13:48 - наследственный и потомственный комбинатор
16:53 - обращение к дочернему элементу '>'
17:51 - универсальный селектор '*'
21:23 - обращение по атрибуту
Псевдо-классы
27:00 - :first-child
27:50 - :last-child
31:34 - :not-child(:first-child)
33:38 - :nth-child()
36:24 - :empty
37:57 - :hover
38:33 - :active
38:41 - :focus
38:50 - :checked
39:54 - Итоги
Спасибо!
Спасибо!
❤
Лучший
Про запоминание odd и even отдельный респект! Я тоже никак не мог запомнить, какой есть какой.
Я то думал это только у меня такая херня, а оно вон как. Походу мы имеем дело с odd problem.
Ахаха, тоже путался, теперь все понятно ))
а что путать нечетное и четное в гугле переведи слова
а я путаю значение слов чётное и нечётное )) а уж odd и even подавно
😊приятно смотреть. Автор так по-доброму улыбается, когда делится какими-то фишками запоминания и понимания. 40 минут пролетели незаметно, спасибо за видео!
Отличная подача, посмотрел с удовольствием.
Видео-туториалы вносят большой вклад относительно WEB-документации. Бывают моменты, когда WEB-документы не полностью передают тонкости тематики. Достойная запись. Объяснено вдумчиво, с толком, с расстановкой. ᗩвтору респект. Успехов и процветания.👍
Было полезно и интересно! Ставлю лайк + коммент!) Спасибо Виталию!
Какой же классное видео!!! Всё ясно и понятно! Спасибо огромное автору!!!
за селектор + отдельное спасибо , сколько смотрел примеров верстки ВСЕ использовали переопределения стиля!
Классный урок, спасибо за видео:)
Отличное видео! Теперь тоже больше не буду путать odd и even). Спасибо!
Спасибо Вам за годную и понятную инфу🙌🏻
Спасибо)
Очень классная подача материала. Понравилось
И мою благодарность примите пожалуйста) всё понравилось ,добавил к себе в плейлист )
Спасибо вам большое за такое простое и доступное обьяснение! Вы просто супер!
Отличное преподавание👍👍👍
Супер полезный ролик. Спасибо)
Благодарю)
Спасибо Виталя!!! Очень помог с псевдоклассами!
Вы - большая Умничка. Спасибо большое!
Очень круто! Спасибо
Благодарю за информацию. Внес разъяснения :)))
Красавчик спасибо большое . после ваших видосов можно гением стать )) мне очень было необходимо укрепить знания и долго искал блогера у которого есть большой опыт по верстке . который не заикается и не стерает все по 50 раз ) все четко все по теме. очень крутейший канал у вас спасибо что вы есть )
Спасибо! Годный контент!
Как классно! Благодарю!
Благодарю Вас за видео.
Отличный материал и подача, благодарю!
Благодарю
Спасибо большое за видео !🙏
Вот прям респект. Одно слово-характеристика видео : "ПОНЯТНО"
Да, комментаторы написали правду - очень информативная ясная подача!
Прикольно, освежил в памяти, не смотря на то что всё это уже прошёл, спасибо тебе, кстати клёвое интервью у Айтибороды, спасибо
Очень круто сделал. Понятно и внятно. Тем кому кажется медленно, то рекомендую 1.25 использовать, тогда будет вообще пушка )
Ты слишком позитивный чувачок 🙃
Спасибо большое, продолжай в том же духе. Очень помог!
Рад -) Спасибо)
Большое спасибо!
Ещё только изучаю CSS. в 13:28 вы закрепляете материал про "+" и "~", говоря про "+", что это "соседний", однако я вижу разницу между тремя вариантами "соседний"/"предыдущий соседний"/"следующий соседний". Как мне показалось корректнее было бы к "+" применить "следующий соседний", так как просто "соседний" может означать "предыдущий соседний", но как мы видим "+" на предыдущих соседей не работает, да и под соседним понимается только рядом стоящий элемент имеющий общего родителя; и про "~" - опять же, цитата: "ко всем элементам на всей протяженности независимо от того, что находится между этими элементами", я всё-таки себе позволю добавить, что такое утверждение истинно, если эти элементы на одном уровне подчиненности с любой стороны (неважно, рядом или нет, главное что у них должен быть общий родитель). Прошу прощения, что взялся учить учителя, однако считаю, что при закреплении нужно уточнять все нюансы, иначе можно неправильно закрепить материал.
Также имею цель убедиться, что я правильно понял сам, и если нет, то прошу меня поправить.
Спасибо за полезное и информативное видео! Таймкоды бы еще, и вообще пушка тогда)
Кстати очень понятно и интересно рассказывает , рекомендую!)
Посмотрел выпуск It-Бороды с вашим участием. Убедили что без верстки во фронт не придёшь. В итоге смотрю ваш канал и понимаю, что зря сторонился верстки. Ваши видео раскладывают всё по полочкам и становится легче. Спасибо за ваш труд !
Робіть по більше таких відео. Не зупиняйтесь !
очень хорошее видео !!!!!!!! Автор мега крут
Спасибо! Круто!
Спасибо 👍
спасибо за полезный крутой видос)
Мне понравилось)
Спасибо большое!:)
Офигенный способ запомнить odd, even)
я запомнил так: odd - странное слово, значит нечетное.
Потом оказалось что odd имеет также значение - странный)
Лучший учитель из всех кого видел , а видел всех !!!
Серьёзное заявление -))
Спасибо, очень классно, информативно, очень интересен псевдокласс Checked, хотелось бы поподробнее, я слышал, что с помощью дата-атрибутов и checked можно делать кучу динамичных вещей, в частности любые выпадающие списки.. и это вообще без JS.
Какой же ты крутой!
Спасибо - полезно!
Супер. Дякую)))
Шикарное видео и канала вообще!
Жаль, что так мало подписчиков, если честно я удивлен.
Не всё же подписчиками измеряется.
Что ж, учитывая что я знаю в два раза больше селекторов, то я определенно успешно обучаюсь)) Но все же раньше начинал изучать селекторы именно из этого видео, очень годное видео, сейчас пересмотрел) И не зря, освежил память, например, селекторы + и ~, подзабыл как они работают. А насчет селекторов в атрибутах, то я рекомендую всегда использовать *, этот селектор максимально точен и удобен, и символ легко набирается на цифровой клавиатуре) Простота -- залог успеха и красивого кода
Спасибо за видео
не за что -)
Спасибо)
Видео интересное и полезное, но чтобы запомнить все селекторы, их надо постоянно применять. На практике применяю не все, поэтому некоторые селекторы забываются. Спасибо большое. Видео сохраню у себя.
видео топ, максимольно доступно
Благодарю
Спасибо большое за информацию.
Наверное не хватает только :root для тех кто пользуется переменными
братан спасибо большое
Спасибо, хорошо рассказываешь) Перешел к тебе от Хауди Хо!
Хауди Хо это просто пиар блогер, за 40мин он учит css, хотя даже и 5% не смог выложить от всех тем про css
Thanks
Спасибо за такой интересный урок, но не хватило ::before, ::after and last-of-type и тд.
Бефор и афтер не являются селекторами. Они в отдельном видео.
Brazzers Молодец! Спасибо за понятное разъяснение.
Можете посоветовать книги или видео обучения, с готовыми проектами, желательно не старше 3-х летней давности.
А видео по JS будут?
Что ? ЦСС ?) Я понял, спасибо за видео )))))00)0)0)))0)))
я когда смотрю на него я вспоминаю Детство, там где Крэнг слушает Крэнга
Спасибо за ваш труд! Возможно подскажите в следующем вопросе. В документе используются семантические теги. Главный footer, состоит из header и footer. Как правильно обратится к вложенному footer через селектор, что бы не нарушить свойства главного footer?
По уникальному классу
а :target и :focus где?))) чего не рассказал?))
+1 колокольчик))) 🤩
Вот сколько изучаю HTML and CSS и разницу от языков программирования что-то особо не вижу,просто узкоспециализированные инструменты ,ЯП.Такие хорошие у вас уроки ,особо спасибо за фрогги, что сразу вижу ошибки и на что их нужно заменить ,до того как вы их исправляете .
Это язык разметки а не ЯП.
@@user-sm5mm7pk5x ну по сути это все же ЯП, просто очень примитивный, ограниченный в функциональности. Да и все, что имеет код - это программирование, а программировать без ЯП невозможно. Сложить дважды два думаю не сложно)
Мужик
Хочется настроить так же Visual Studio Code, чтобы она отображала сразу результат. Подскажите как это сделать? Или это не программа, а какой то специальный сайт?
Нашел у вас видео о "Песочницах". th-cam.com/video/ax1GK2M53as/w-d-xo.html Просто никогда не сталкивался. Удобная штука. )
объясните пожалуйста для Чайника :) Классы имеют какие то названия? или мы пишем что хотим? Спасибо.
Что угодно, но с логикой желательно дружить -) Если блок со списком новостей, то и стоит назвать - list-news. И так далее...
@@prosto_razrabotka Спасибо Сенсей
Я пишу Id в тегах header, section и footer. Писать Id или классы? Как будет лучше?🤔
Лол конечно классы, Id используют для скриптов
кажется что ваше обьяснение с рубашками и шкафом, немного не в тему)
26:30
Времени по темам не хватает .
По завершению видео был пример с ссылкой
...псевдоКласс :hover - делает элемент активным если наведена мышь...
Вопрос: "Как сделать плавный переход из одного цвета в другой?"
Пример:
div {
background-color: red;
transition: .5ms;
}
div:hoover {
background-color: green;
}
Нужное тебе свойство называется "transition", время задается всегда в ms
╔╗╔╗╔╗╦╗
║╦║║║║║║
╚╝╚╝╚╝╩╝
👀
Как же круто Вы рассказываете!!! Осталось немного попрактиковаться, чтобы закрепить в памяти полученную информацию и уметь использовать на практике !!!
Что касается лайков и дизлайков под этим видео, то скажу так:
дизлайк{
status: idiots;
}
там где ссылка посещена это же псевдокласс "visited" а не "active", и на счет сестринского псевдокласса с + -ом не совсем согласен, хорошо читай документацию, а так с остальными согласен
Не подскажите на какой минуте речь идёт о псевдоклассах?
Ну вот кто, блэд, КТО СТАВИТ ДИЗЛАЙК? Покажись!
+
Это Кошевой ?
Смешно
А как же before и after?
В отдельном видео на канале.
ок)
bump
лысый из браузера хорош
Ага, согласен
@@baldfrombrowser хаха я твои видео смотрел вчера, и запомнил название канала, во как совпало
Поддерживаю -)
Ни чего не видно
Для чего это видио, если не чего не видно
@@vikaaleshina7293Надень очки. Либо приблизь ролик, а ещё научись правильно писать
Пища для мозгов вкусняшка! :3
Все-таки обманул: обещал оставить 2 ссылки - на Мозиллу и W3 - и не оставил!
покрупнее бы
Слишком мелко!!! Не удобно смотреть!!!!!
Всё нормально но, блин, про какие кейсы он говорил, которые вспомнить не мог (на 4:47 минуте) !!!????
Причём здесь кейсы???
Вот как понимать человека если он говорит вроде по-русски и в своей речи употребляет в полнее устоявшееся значение слова кейс - шкаф, ёмкость, сундук, короче кейс. Но употребляет это слово с совершенно иным значением. К чему этот шифр?
А точнее, зачем заменять нормальное, устоявшееся слово в русском языке на уже двусмысленный англицизм? Ваша речь становится ещё менее понятной!
Это простое желания подрожать, идти в ногу с трендами? Или как «по фене ботать» - чтобы только свои поняли?
Или это просто слабое знание своего родного языка, когда словарный запас русского языка ещё на среднем уровне а уже за английский взялся, от чего часто правильные слова по-русски уже трудно подобрать?
Сея претензии, по сути не конкретно к автору ролика, а вообще ко многим, особенно из IT - сферы.
Страшно представить, когда мода пойдёт учить китайский язык, что тогда с русским станет. И как тогда русскую речь будут пытаться понять те, кто только английский учил.
Кейс в русском языке - это кейс, а не случай, обстоятельство, ситуация или премер из жизни.
Дело вовсе не в тренде и всем таком. Просто когда ежедневно на работе говорят - митинг, колл, кейс, стендап - со временем это становится для тебя обычным словом и даже не возникает мысли, что кто-то по какой-то причине это не поймёт.
@@prosto_razrabotka Вы извиняйте, ежели что, просто уже наболело. Пар выпустил.
Слишком много последнее время я от людей подобные словечки и выражения слышу, аж ухо режет.
После ЦэЭсЭс слушать уже не хотелось... /рукалицо/ уши режет...
топчик