CSS3 #3 Составные селекторы (Composite Selectors)

Рет қаралды 21,724

3 жыл бұрын

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZfaq: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Пікірлер: 71

@user-kw5yy1gi7e Жыл бұрын

Евгений, огромное спасибо за Ваши видео.

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@eugenia9999 3 жыл бұрын

Так, пора открывать комментарии )) Спасибо за видео !!)) Топчик как всегда!!)))

@YauhenKavalchuk 3 жыл бұрын

Спасибо за поддержку!)

@aleksandrk2012 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста)

@Vitaliy42 6 ай бұрын

Все по полочкам разложили!

@YauhenKavalchuk 6 ай бұрын

👍

@user-cd1sr5sx2r 3 жыл бұрын

Спасибо за хороший справочник по CSS.

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста

@You-Rock 2 жыл бұрын

Спасибо, афигенный урок! Как и все твои, в принципе)

@YauhenKavalchuk 2 жыл бұрын

Спасибо за отзыв

@-Forever-Young- 3 жыл бұрын

Спасибо за видео. Вчера только узнал о составных селекторах и тут же видео выходит =)

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста

@pavel7930 3 жыл бұрын

Спасибо, повторение - мать учения !

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста)

@omgpewpew 2 жыл бұрын

Спасибо за Ваш труд!

@YauhenKavalchuk 2 жыл бұрын

Спасибо за отзыв

@kostiantynyemets1934 3 жыл бұрын

Евгений, у меня к Вам вопрос: как понять, что ты хорошо знаешь CSS/CSS3? Т.е., где этот потолок/барьер, что нужно идти дальше к JS? По типу: гриды, флексы, основы, анимации.. Есть ли какой-то список того, что нужно знать, перед изучением JS? Куда не гляну, найду какой-нибудь новый селектор или же технологию/метод, как можно ещё применить тот или иной селектор и складывается такое ощущение, что CSS нужно учить ещё плотнее и обширнее, чем сейчас.

@YauhenKavalchuk 3 жыл бұрын

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

@alexandrsorokin1385 Жыл бұрын

@@YauhenKavalchuk как показывает практика наблюдения моих товарищей в работе с JS, то не просто так была распределена работа на jun mid sen) короче говоря, всего не запомнить сходу, в любом случае нужно будет заглядывать в справочник (гугл).Чем больше работаешь (практикуешь), тем больше запоминаешь

@user-ke9ic7yq1h 3 жыл бұрын

Спасибо Евгений, ты{ ГЕНИЙ }

@YauhenKavalchuk 3 жыл бұрын

Спасибо)

@natlusrun 3 жыл бұрын

@@YauhenKavalchuk console.log('спасибо');

@mykytademchenko3044 2 жыл бұрын

а точку с запятой в конце строки в фигурных скобках кто будет ставить?😂

@olehyefimenko6693 Жыл бұрын

Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

@YauhenKavalchuk Жыл бұрын

👍

@sergkuznetzov3469 3 жыл бұрын

Спасибо,круто!

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста

@VaBank3 Жыл бұрын

Блииииин, ну случайно же напоролся на канал. Столько всего узнал! (Я новичок в web)

@YauhenKavalchuk Жыл бұрын

👍

@missisipi9992 Жыл бұрын

Спасибо!

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@dimageorgiev5798 3 жыл бұрын

Спасибо

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста

@NakoTW 2 жыл бұрын

спасибо

@YauhenKavalchuk 2 жыл бұрын

Пожалуйста

@polina393 2 жыл бұрын

Круто

@YauhenKavalchuk 2 жыл бұрын

Спасибо

@user-ke9ic7yq1h 3 жыл бұрын

Евгений, вы зачем удалили остальных видео курсов по css? Поставьте пожалуйста 🤗

@YauhenKavalchuk 3 жыл бұрын

Я не удалил, доступ будет открываться постепенно, по 2 урока в неделю. Если не хотите ждать, в описании есть ссылка как можно получить полный доступ

@My-video123 3 жыл бұрын

Очень важный вопрос. Сесней, подскажи пожалуйста, я могу использовать несколько классов или айди для определенных текстовых блоков или ДИВов? Спасибо

@YauhenKavalchuk 3 жыл бұрын

Да, можно. Только помните что id на странице должен быть уникальный, а класс может повторяться

@none1307 3 жыл бұрын

Для продвижения.

@YauhenKavalchuk 3 жыл бұрын

👍

@Sweet_and_joy Жыл бұрын

Извините, добрый день, а - .class p и p .class - это одно и тоже? Последовательность не важна? Или я запуталась...

@Sweet_and_joy Жыл бұрын

Ещё раз извините, вроде бы сама разобралась. В первом случае селектор сработает, если этот класс присвоен целому блоку, в который этот тег p входит, а во втором случае - если этот класс присвоен нескольким тегам, включая тег p.Так ведь?

@YauhenKavalchuk Жыл бұрын

В первом случае стили добавятся ко всем параграфам внутри элемента с классом class. Во втором случае ко всем элементам находящимся внутри параграфа p, у которых так же есть класс class

@Sweet_and_joy Жыл бұрын

@@YauhenKavalchuk спасибо

@Krylowandrey 12 күн бұрын

3:08 а если мы просто напишем ul span ( вместо ul li > span)? Будут ли эти записи равнозначными?

@YauhenKavalchuk 12 күн бұрын

Если структура такая: ul>li>span, то эффект одинаковый. Но в вашем случае будет стилизация ВСЕХ span внутри ul.

@denisiskra996 2 жыл бұрын

4:20 а почему в предыдущем списке точка с маркированного списка окрасилась в акву?

@YauhenKavalchuk 2 жыл бұрын

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

@denisiskra996 2 жыл бұрын

@@YauhenKavalchuk интересный ответ :) но я в этой сфере не в первый раз, так что вполне ожидаемо)

@quadrat2092 2 жыл бұрын

скажите, а селектор "p.class" это тоже самое что и "p .class"?

@YauhenKavalchuk 2 жыл бұрын

Нет, в первом случае вы добавляете стили к параграфу с классом class, а во втором, к любому дочернему элементу параграфа с классом class

@quadrat2092 2 жыл бұрын

@@YauhenKavalchuk Понял, спасибо! А специфичность в обоих случаях 11?

@Lokstar_Ugar 5 ай бұрын

не пон , почему в примере на 4:00 Li + Li меняют цвет именно после первого?

@YauhenKavalchuk 5 ай бұрын

Ну такая особенность синтаксиса

@borisbritva2504 6 ай бұрын

Чем отличаются селектор со знаком ~ от селектора со знаком + ?

@Vitaliy42 6 ай бұрын

тут наверно лучше самому проверить, чтобы дословно понять. Но вроде как я понял. @YauhenKavalchuk поправьте если не прав пожалуйста label + input { color: red; } При такой разметке стиль применится только к первому , но не ко второму: Лейбл - - - - - - - - - - - - - - - - - - - - - - - - - - - -- label ~ input { color: red; } При такой разметке стиль применится ко всем после : Лейбл