Для того щоб не заплутатися в складних селекторах, у VScode при наведені курсору на селектори з'являється віконце пояснення структури та вкладеності цього селектора. На відео це видно і це мега зручно новачкам) Відео як завжди супер!
Дякую дуже гарно розповідаєте, все зрозуміло і приємно слухати!❤ Мені лише трохи не вистачає дз для закріплення тем. Бо слухаєш, повторюєш і наче все розумієш, а от чи вийде потім самостійно це використати.. Розумію, що можно і так практикувати після уроку, але на самому початку дуже важко сформувати собі задачу.
10:12 я помітив, що воно прив`язується не стільки до атрибута, як до символа і вийшло так, що коли я написав сss файл p[k]{ background-color:blue; color:red;} html файл text ця штука спрацювала!!Якась чорна магія.Швидше за все воно не прив'язується до конкретного атрибута ,а до самої назви атрибута навіть, якщо цього атрибута взагалі немає.
Насправді твої відео це скарб. Я людина яка колись давно отримала освіту по спеціальності Computer Science. Вчився я фігово і років 5 після працював собі в телекомі поки не захотілось все таки піти в розробники. Саме твої відео максимально комфортно дивитись. Інший подібний контент що я знаходив, несе в собі забагато води і розжовувань бо автори не можуть зрозуміти де та межа коли новачок може не зрозуміти, а я навпаки людина яка має базові знання то там то в іншому питанні. Як результат, увага навпаки розсіюється від того що ти постійно чуєш те що вже тобі розповідали, або ти вже знаєш. В тебе же ідеальний баланс між інформативністю і поясненням. Дякую тобі за це.
Чим > від ~ відрізняється? В CSS селектори ~ та > використовуються для вибору елементів на сторінці, але вони мають різні значення та визначення. > (child combinator): > вказує, що вибірка повинна бути прямим нащадком (дитиною) попереднього елемента. Наприклад, div > p вибере всі елементи , які є прямими нащадками елемента . Приклад: css Copy code div > p { /* стилі для , якщо є прямою дитиною */ } ~ (general sibling combinator): ~ вказує, що вибірка може бути будь-яким нащадком попереднього елемента, який є його ровесником (тобто має того ж батька). Наприклад, p ~ span вибере всі елементи , які є ровесниками (тобто на тому ж рівні вложеності) елемента . Приклад: css Copy code p ~ span { /* стилі для , якщо є ровесником на тому ж рівні вложеності */ } Отже, головна різниця полягає в тому, що > вибирає тільки прямих нащадків, тоді як ~ вибирає всіх ровесників на тому ж рівні вложеності, які є нащадками того ж батька.
![[TH] Esports World Cup : Point Rush Stage](http://i.ytimg.com/vi/eLU-jnYp3Zs/mqdefault.jpg)
Якраз той випадок, коли лайк ставлю ще до початку перегляду ролика ( щоб не забути). Красно дякую!
Той невідомий знак під esc називається «тільда». Дякую за відео:)
ахах, нарешті, дякую) я був занадто лінивий, щоб загуглити)
Дуже чітке пояснення. ТОП4ик, дякую, та ще й Українською, ще рік тому вся інф була перважно рашистською!Велике дякую!
розказуй також про гарячі клавіші) якими користуєшся
Дякую ти найкращий!
Нарешті кінець селекторів)) дякую за таку нелегку роботу)
Дуже дякую за Вашу працю!
Ох, на початку мого шляху як фронтендера, селектори - кістка в горлі, чесне слово. Дякую за детальні пояснення! Успіхів у Вашій справі
Молодець, класний та якісний контент українською!! Доречі, відсутнє посилання на наступний урок!
Дякую. Голова обертом від кількості можливостей)
Дякую! 6:00 Хвиляста лінія називається тільда.
ахаха, дякую, запам'ятаю і більше не забуду)
Для того щоб не заплутатися в складних селекторах, у VScode при наведені курсору на селектори з'являється віконце пояснення структури та вкладеності цього селектора. На відео це видно і це мега зручно новачкам) Відео як завжди супер!
Спасєба
Знову дякую :)
Дякую дуже гарно розповідаєте, все зрозуміло і приємно слухати!❤
Мені лише трохи не вистачає дз для закріплення тем. Бо слухаєш, повторюєш і наче все розумієш, а от чи вийде потім самостійно це використати..
Розумію, що можно і так практикувати після уроку, але на самому початку дуже важко сформувати собі задачу.
таке враження, що правила різні, але виконують одні і ті ж задачі, може це я так бачу як новачок
Дякую!
наступного разу замість видалення коду ліпше - закоментувати щоб потім у разі потреби можна було вернутись чи підсумувати
👍👍👍
Доброго вечора,поясніть будь ласка (7:03) чому Hello знаходиться поза межами , а Hello2 знаходиться в межах тегу ?
~ тільда
в мене чомусь + р не працює
О ти вже тут лови медальку за "Старанність"
Як визначити коли мені знадобиться селектор~ і якщо я не знаю , що є якийсь тег або css стиль, як визначити, що саме шукати?
з плюсом чомусь не відкликається перше р не перефарбовується
10:12 я помітив, що воно прив`язується не стільки до атрибута, як до символа і
вийшло так, що коли я написав
сss файл
p[k]{
background-color:blue;
color:red;}
html файл
text ця штука спрацювала!!Якась чорна магія.Швидше за все воно не прив'язується до конкретного атрибута ,а до самої назви атрибута навіть, якщо цього атрибута взагалі немає.
Насправді твої відео це скарб. Я людина яка колись давно отримала освіту по спеціальності Computer Science. Вчився я фігово і років 5 після працював собі в телекомі поки не захотілось все таки піти в розробники. Саме твої відео максимально комфортно дивитись. Інший подібний контент що я знаходив, несе в собі забагато води і розжовувань бо автори не можуть зрозуміти де та межа коли новачок може не зрозуміти, а я навпаки людина яка має базові знання то там то в іншому питанні. Як результат, увага навпаки розсіюється від того що ти постійно чуєш те що вже тобі розповідали, або ти вже знаєш. В тебе же ідеальний баланс між інформативністю і поясненням. Дякую тобі за це.
Чомусь не працюють селектори, крім >. А всі інші нічого не відображають
Подивись уважно, там в прикладі для + і ~ теги i знаходяться не в середині , а вже після нього
@@LJerichoдякую) я пів години не міг зрозуміти, поки не зайшов в коментарі) навіть англ ресурси перекопував😂
навіть голос автора механічний
чомусь цього відео немає в списку з іншими відео цього ж курсу
Хм, дивно, мушу перевірити
В мене є.
~ це теж не працює може в оновлених версіях це убрали я через роки розбираю урок
Чим > від ~ відрізняється?
В CSS селектори ~ та > використовуються для вибору елементів на сторінці, але вони мають різні значення та визначення.
> (child combinator):
> вказує, що вибірка повинна бути прямим нащадком (дитиною) попереднього елемента.
Наприклад, div > p вибере всі елементи , які є прямими нащадками елемента .
Приклад:
css
Copy code
div > p {
/* стилі для , якщо є прямою дитиною */
}
~ (general sibling combinator):
~ вказує, що вибірка може бути будь-яким нащадком попереднього елемента, який є його ровесником (тобто має того ж батька).
Наприклад, p ~ span вибере всі елементи , які є ровесниками (тобто на тому ж рівні вложеності) елемента .
Приклад:
css
Copy code
p ~ span {
/* стилі для , якщо є ровесником на тому ж рівні вложеності */
}
Отже, головна різниця полягає в тому, що > вибирає тільки прямих нащадків, тоді як ~ вибирає всіх ровесників на тому ж рівні вложеності, які є нащадками того ж батька.
div4