Немножечко полезной информации про селекторы. Часть 1.

Контекстные селекторы
Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }
Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.

Читать их проще всего справа налево:

/* выбрать все теги strong внутри тегов p */
p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,
которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }

Соседние селекторы
Соседние селекторы используются для расположенных рядом элементов.

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<ul>
<li class="hit"></li>
<li class="miss"></li>
</ul>
Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селекторы в CSS можно очень гибко комбинировать. В частности, можно комбинировать контекстные и соседние селекторы.

Дочерние селекторы
Любые элементы, расположенные внутри родительского элемента называются потомками. А дочерними элементами являются ближайшие потомки. Взгляните на пример:

<ul>
<li><span>...</span></li>
<li><span>...</span></li>
</ul>
По отношению к списку <ul> элементы <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

Контекстные селекторы влияют на всех потомков.

Если нужно задать стили только для дочерних элементов используется дочерний селектор, в котором используется символ >. Например: ul > li или ul > li > span.

<b>Селекторы атрибутов</b>
Селекторы атрибутов позволяют выбирать элементы по любым атрибутам. Они записываются с использованием квадратных скобок: элемент[атрибут]. Примеры селекторов:

input[checked] { ... }
input[type="text"] { ... }
Первый селектор выберет поля формы, у которых есть атрибут checked, второй селектор выберет поля формы, у которых атрибут type имеет значение text.

Очень крутая статья
https://abatickaya.medium.com/%D0%B4%D1%83%D0%BC%D0%B0%D1%8F-%D0%BE-%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D0%B8-%D0%BF%D0%B8%D1%88%D0%B5%D0%BC-css-9032d7b64fb2

Доброе утро! За чашечкой кофэ предлагаю ознакомиться с прекрасной статьёй.
https://isqua.ru/blog/2016/06/19/crash-test-viorstki/

крутая задачка
https://www.codewars.com/kata/56747fd5cb988479af000028/train/javascript

Предлагаю челендж, кто решит самым непонятным способом, тот крутой 😎

+ мораль, не зря порешал задачки, советую вам тоже решить https://www.codewars.com/kata/578aa45ee9fd15ff4600090d/javascript

Прикольный макет https://www.figma.com/file/jnCM95go0WrPe6dmgF9xDg/Ellty-LP-%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0-(Copy)?node-id=1%3A2

agent_cipso (с чатика на твиче) скинул нам крутой план с практикой:
https://github.com/bradtraversy/50projects50days ( мини-практика )
https://github.com/bradtraversy/vanillawebprojects ( мини-практика )
https://github.com/wesbos/JavaScript30 ( мини-практика )
https://github.com/trekhleb/javascript-algorithms ( алгоритмы )
https://www.adventofjs.com ( мини-практика )
https://www.patterns.dev/posts ( паттерны )

Две статьи с хабра, как правильно верстать в 2022
https://habr.com/ru/post/655009/
https://habr.com/ru/post/664060/
Полезно думаю будет прочитать

обновил ссылку, прям сейчас идёт живое общение, залетайте!
https://discord.gg/FmrBzNcRHx

Предлагаю скинуть свои профили codewars под этим постом. Интересно посмотреть 😎
https://www.codewars.com/users/jointime

Суперский топик, про то как правильно называть свои переменные https://github.com/yoksel/common-words

Сервер прокачали до прикольных стикеров, опять же максимально настоятельно рекомендую подписаться. Общение на около айтишные темы и взаимопомощь 😎 https://discord.gg/xBxnCCmc