селектор class & id (css) зачем нужен селектор класса если есть айди и он даже пишется короче))?

Затем, что id должен быть уникален для каждого элемента, а класс - совершенно необязательно.
Класс вообще может указывать не на элемент, а на какое-то свойство элемента, которое могут иметь совершенно другие элементы и даже элементы совершенно других типов.
У одного и того же элемента может быть несколько классов для разных свойств, записанных в атрибуте class через пробел.
Например, в CSS можно объявить класс focused, чтобы элементы с таким классом окрашивались в желтый цвет, и любой выделенный элемент JS-ом делать желтым, добавляя этот класс.