ВСЁ, что нужно знать о 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 минут.
*
Про запоминание odd и even отдельный респект! Я тоже никак не мог запомнить, какой есть какой.
Я то думал это только у меня такая херня, а оно вон как. Походу мы имеем дело с odd problem.
Ахаха, тоже путался, теперь все понятно ))
а что путать нечетное и четное в гугле переведи слова
а я путаю значение слов чётное и нечётное )) а уж odd и even подавно
😊приятно смотреть. Автор так по-доброму улыбается, когда делится какими-то фишками запоминания и понимания. 40 минут пролетели незаметно, спасибо за видео!
Видео-туториалы вносят большой вклад относительно WEB-документации. Бывают моменты, когда WEB-документы не полностью передают тонкости тематики. Достойная запись. Объяснено вдумчиво, с толком, с расстановкой. ᗩвтору респект. Успехов и процветания.👍
Было полезно и интересно! Ставлю лайк + коммент!) Спасибо Виталию!
Какой же классное видео!!! Всё ясно и понятно! Спасибо огромное автору!!!
Отличная подача, посмотрел с удовольствием.
Отличное видео! Теперь тоже больше не буду путать odd и even). Спасибо!
И мою благодарность примите пожалуйста) всё понравилось ,добавил к себе в плейлист )
Классный урок, спасибо за видео:)
за селектор + отдельное спасибо , сколько смотрел примеров верстки ВСЕ использовали переопределения стиля!
Очень круто! Спасибо
Вы - большая Умничка. Спасибо большое!
Обращение по:
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 - Итоги
Спасибо!
Спасибо!
❤
Лучший
Как классно! Благодарю!
Спасибо вам большое за такое простое и доступное обьяснение! Вы просто супер!
Благодарю за информацию. Внес разъяснения :)))
Очень классная подача материала. Понравилось
Спасибо Виталя!!! Очень помог с псевдоклассами!
Благодарю Вас за видео.
Спасибо! Годный контент!
Спасибо большое за видео !🙏
Спасибо Вам за годную и понятную инфу🙌🏻
Спасибо)
Отличное преподавание👍👍👍
Красавчик спасибо большое . после ваших видосов можно гением стать )) мне очень было необходимо укрепить знания и долго искал блогера у которого есть большой опыт по верстке . который не заикается и не стерает все по 50 раз ) все четко все по теме. очень крутейший канал у вас спасибо что вы есть )
Прикольно, освежил в памяти, не смотря на то что всё это уже прошёл, спасибо тебе, кстати клёвое интервью у Айтибороды, спасибо
Отличный материал и подача, благодарю!
Благодарю
Большое спасибо!
Очень круто сделал. Понятно и внятно. Тем кому кажется медленно, то рекомендую 1.25 использовать, тогда будет вообще пушка )
Спасибо! Круто!
Да, комментаторы написали правду - очень информативная ясная подача!
Спасибо за полезное и информативное видео! Таймкоды бы еще, и вообще пушка тогда)
Спасибо большое, продолжай в том же духе. Очень помог!
Рад -) Спасибо)
Вот прям респект. Одно слово-характеристика видео : "ПОНЯТНО"
Супер полезный ролик. Спасибо)
Благодарю)
Кстати очень понятно и интересно рассказывает , рекомендую!)
Посмотрел выпуск It-Бороды с вашим участием. Убедили что без верстки во фронт не придёшь. В итоге смотрю ваш канал и понимаю, что зря сторонился верстки. Ваши видео раскладывают всё по полочкам и становится легче. Спасибо за ваш труд !
Спасибо 👍
Спасибо - полезно!
Робіть по більше таких відео. Не зупиняйтесь !
Спасибо большое!:)
спасибо за полезный крутой видос)
Спасибо, очень классно, информативно, очень интересен псевдокласс Checked, хотелось бы поподробнее, я слышал, что с помощью дата-атрибутов и checked можно делать кучу динамичных вещей, в частности любые выпадающие списки.. и это вообще без JS.
Ты слишком позитивный чувачок 🙃
очень хорошее видео !!!!!!!! Автор мега крут
Офигенный способ запомнить odd, even)
я запомнил так: odd - странное слово, значит нечетное.
Потом оказалось что odd имеет также значение - странный)
Мне понравилось)
Что ж, учитывая что я знаю в два раза больше селекторов, то я определенно успешно обучаюсь)) Но все же раньше начинал изучать селекторы именно из этого видео, очень годное видео, сейчас пересмотрел) И не зря, освежил память, например, селекторы + и ~, подзабыл как они работают. А насчет селекторов в атрибутах, то я рекомендую всегда использовать *, этот селектор максимально точен и удобен, и символ легко набирается на цифровой клавиатуре) Простота -- залог успеха и красивого кода
Спасибо)
Спасибо за видео
не за что -)
Лучший учитель из всех кого видел , а видел всех !!!
Серьёзное заявление -))
Ещё только изучаю CSS. в 13:28 вы закрепляете материал про "+" и "~", говоря про "+", что это "соседний", однако я вижу разницу между тремя вариантами "соседний"/"предыдущий соседний"/"следующий соседний". Как мне показалось корректнее было бы к "+" применить "следующий соседний", так как просто "соседний" может означать "предыдущий соседний", но как мы видим "+" на предыдущих соседей не работает, да и под соседним понимается только рядом стоящий элемент имеющий общего родителя; и про "~" - опять же, цитата: "ко всем элементам на всей протяженности независимо от того, что находится между этими элементами", я всё-таки себе позволю добавить, что такое утверждение истинно, если эти элементы на одном уровне подчиненности с любой стороны (неважно, рядом или нет, главное что у них должен быть общий родитель). Прошу прощения, что взялся учить учителя, однако считаю, что при закреплении нужно уточнять все нюансы, иначе можно неправильно закрепить материал.
Также имею цель убедиться, что я правильно понял сам, и если нет, то прошу меня поправить.
Какой же ты крутой!
братан спасибо большое
Супер. Дякую)))
видео топ, максимольно доступно
Благодарю
Шикарное видео и канала вообще!
Жаль, что так мало подписчиков, если честно я удивлен.
Не всё же подписчиками измеряется.
Спасибо большое за информацию.
Наверное не хватает только :root для тех кто пользуется переменными
Видео интересное и полезное, но чтобы запомнить все селекторы, их надо постоянно применять. На практике применяю не все, поэтому некоторые селекторы забываются. Спасибо большое. Видео сохраню у себя.
Спасибо, хорошо рассказываешь) Перешел к тебе от Хауди Хо!
Хауди Хо это просто пиар блогер, за 40мин он учит css, хотя даже и 5% не смог выложить от всех тем про css
Спасибо за такой интересный урок, но не хватило ::before, ::after and last-of-type и тд.
Бефор и афтер не являются селекторами. Они в отдельном видео.
Thanks
Можете посоветовать книги или видео обучения, с готовыми проектами, желательно не старше 3-х летней давности.
Brazzers Молодец! Спасибо за понятное разъяснение.
я когда смотрю на него я вспоминаю Детство, там где Крэнг слушает Крэнга
А видео по JS будут?
Спасибо за ваш труд! Возможно подскажите в следующем вопросе. В документе используются семантические теги. Главный footer, состоит из header и footer. Как правильно обратится к вложенному footer через селектор, что бы не нарушить свойства главного footer?
По уникальному классу
Что ? ЦСС ?) Я понял, спасибо за видео )))))00)0)0)))0)))
Вот сколько изучаю HTML and CSS и разницу от языков программирования что-то особо не вижу,просто узкоспециализированные инструменты ,ЯП.Такие хорошие у вас уроки ,особо спасибо за фрогги, что сразу вижу ошибки и на что их нужно заменить ,до того как вы их исправляете .
Это язык разметки а не ЯП.
@@user-sm5mm7pk5x ну по сути это все же ЯП, просто очень примитивный, ограниченный в функциональности. Да и все, что имеет код - это программирование, а программировать без ЯП невозможно. Сложить дважды два думаю не сложно)
Хочется настроить так же Visual Studio Code, чтобы она отображала сразу результат. Подскажите как это сделать? Или это не программа, а какой то специальный сайт?
Нашел у вас видео о "Песочницах". ua-cam.com/video/ax1GK2M53as/v-deo.html Просто никогда не сталкивался. Удобная штука. )
Мужик
а :target и :focus где?))) чего не рассказал?))
+1 колокольчик))) 🤩
объясните пожалуйста для Чайника :) Классы имеют какие то названия? или мы пишем что хотим? Спасибо.
Что угодно, но с логикой желательно дружить -) Если блок со списком новостей, то и стоит назвать - list-news. И так далее...
@@prosto_razrabotka Спасибо Сенсей
Я пишу Id в тегах header, section и footer. Писать Id или классы? Как будет лучше?🤔
Лол конечно классы, Id используют для скриптов
По завершению видео был пример с ссылкой
...псевдоКласс :hover - делает элемент активным если наведена мышь...
Вопрос: "Как сделать плавный переход из одного цвета в другой?"
Пример:
div {
background-color: red;
transition: .5ms;
}
div:hoover {
background-color: green;
}
Нужное тебе свойство называется "transition", время задается всегда в ms
кажется что ваше обьяснение с рубашками и шкафом, немного не в тему)
╔╗╔╗╔╗╦╗
║╦║║║║║║
╚╝╚╝╚╝╩╝
👀
Как же круто Вы рассказываете!!! Осталось немного попрактиковаться, чтобы закрепить в памяти полученную информацию и уметь использовать на практике !!!
Что касается лайков и дизлайков под этим видео, то скажу так:
дизлайк{
status: idiots;
}
26:30
Времени по темам не хватает .
там где ссылка посещена это же псевдокласс "visited" а не "active", и на счет сестринского псевдокласса с + -ом не совсем согласен, хорошо читай документацию, а так с остальными согласен
Не подскажите на какой минуте речь идёт о псевдоклассах?
Ну вот кто, блэд, КТО СТАВИТ ДИЗЛАЙК? Покажись!
+
Это Кошевой ?
Смешно
А как же before и after?
В отдельном видео на канале.
ок)
лысый из браузера хорош
Ага, согласен
@@baldfrombrowser хаха я твои видео смотрел вчера, и запомнил название канала, во как совпало
Поддерживаю -)
bump
Пища для мозгов вкусняшка! :3
Ни чего не видно
Для чего это видио, если не чего не видно
@@vikaaleshina7293Надень очки. Либо приблизь ролик, а ещё научись правильно писать
Все-таки обманул: обещал оставить 2 ссылки - на Мозиллу и W3 - и не оставил!
покрупнее бы
Слишком мелко!!! Не удобно смотреть!!!!!
Всё нормально но, блин, про какие кейсы он говорил, которые вспомнить не мог (на 4:47 минуте) !!!????
Причём здесь кейсы???
Вот как понимать человека если он говорит вроде по-русски и в своей речи употребляет в полнее устоявшееся значение слова кейс - шкаф, ёмкость, сундук, короче кейс. Но употребляет это слово с совершенно иным значением. К чему этот шифр?
А точнее, зачем заменять нормальное, устоявшееся слово в русском языке на уже двусмысленный англицизм? Ваша речь становится ещё менее понятной!
Это простое желания подрожать, идти в ногу с трендами? Или как «по фене ботать» - чтобы только свои поняли?
Или это просто слабое знание своего родного языка, когда словарный запас русского языка ещё на среднем уровне а уже за английский взялся, от чего часто правильные слова по-русски уже трудно подобрать?
Сея претензии, по сути не конкретно к автору ролика, а вообще ко многим, особенно из IT - сферы.
Страшно представить, когда мода пойдёт учить китайский язык, что тогда с русским станет. И как тогда русскую речь будут пытаться понять те, кто только английский учил.
Кейс в русском языке - это кейс, а не случай, обстоятельство, ситуация или премер из жизни.
Дело вовсе не в тренде и всем таком. Просто когда ежедневно на работе говорят - митинг, колл, кейс, стендап - со временем это становится для тебя обычным словом и даже не возникает мысли, что кто-то по какой-то причине это не поймёт.
@@prosto_razrabotka Вы извиняйте, ежели что, просто уже наболело. Пар выпустил.
Слишком много последнее время я от людей подобные словечки и выражения слышу, аж ухо режет.
После ЦэЭсЭс слушать уже не хотелось... /рукалицо/ уши режет...
топчик