Учимся строить CSS селекторы в игровой форме

Сегодня совершенно случайно наткнулся на интерактивную игру-обучалку основ формирования CSS селекторов. С удовольствием с товарищами прошли ее во время митинга. :smile: Конечно достаточно короткая, но для получения базового понимания того, как строятся CSS локаторы - самое оно.

2 лайка

Спасибо.

А есть ли уже тема, в которой собирались бы все ссылки на руководства / мануалы / справочные страницы по локаторам-селекторам? И если такой темы нет, то может её создать, и того, прикрепить, товарищ модератор?

Клевая обучалочка. Немножко поигрался. Понравилось!

Правда как я понял, конструкций а-ля div[class=‘blablabla’] там нету, а они часто бывают полезны.

Почему же? Есть. К примеру, последняя задача с большими яблоками: apple:not(.small)

это функции, а то, о чем я говорил - поиск по значениям аттрибутов.

Или я чего-то не понял… Чем вам не значение атрибута - class тега apple? Чем apple отличается от div, а small - от blablabla?

да, видимо мы друг друга не допоняли. Я привел пример на аттрибуте class.
Если вам нужно найти по значению другого аттрибута? не class?
тогда можно использовать формат типа : имя_тэга[имя аттрибута=‘значение’]. ну там разумеется куча различных вариаций с вложениями и тд и тп.

Понял, да, такого вроде не было.