Не могу понять вообще, в чем разница между всеми [foo=“bar”]? Прошу простить за тупые вопросы, но я не понимаю ни слова в этих метапеременных.
Представь абстракцию-таблицу: в ней есть 2столбца: в первом столбце по очереди перечислены атрибуты, во - втором значения этих атрибутов. У этой абстракции есть имя, и зачастую одна абстракция не отличается от другой содержимым.
Потому создают новую абстракцию, содержащую эти общие пары атрибут-значение.
Чтобы все это упростить, примерно похожим абстракциям задают сходные имена-классы. Например color-1, color-2, color-3 и т.д. чтобы не описывать отдельно для каждой такой абстракции повторяющиеся CSS свойства, существует селектор вида foo^=bar.
^ здесь это способ поиска по атрибуту, тут нас интересуют классы (класс это атрибут). class^=“color” будет искать среди значений классов “color” таким образом, чтобы слово “color” было в начале значения классов. Чтобы в выборку не попадал класс “another-color”.
С другой стороны, селектор вида class*=“color” будет искать слово “color” среди классов даже если оно будет в середине или конце.
Хороший пример с классами, но, хочу вас попросить кое о чем:
зайдите в Селекторы, часть 3
пропишите сначала это свойство - input[value$=“кекс”] {
color: #3498db;
}
а потом это - input[name=“slogan”] {
color: #3498db;
}
Разницы нет, а второе запоминается легче. Или я чего-то не знаю?
А какое именно задание? А то с телефона, поиск ограничен)
задание 2
Смотрите, первый селектор выбирает ВСЕ абсолютно инпуты ЗНАЧЕНИЕ которых заканчивается на “кекс”.
Второй селектор выбирает исключительно те инпуты ИМЯ которых “slogan”. Вполне может статься, что оба эти селектора выбирают одно и то же, но следует понимать разницу между ВСЕ и ИСКЛЮЧИТЕЛЬНО.
P.s. соре за капс, болдом выделять с телефона неудобно
за капс не переживайте, объяснение на 5 баллов. Огромное спасибо 
Я собственно к чему, допустим есть несколько инпутов с именем “ya-slogan-mechty”.
Input[name=“slogan”] не выберет ничего, т.к в точности не соответствует, а
Input[name*=“slogan”] выберет все инпуты содержащие строчку “slogan” в имени.
Теперь уж точно все понял. Спасибо =)
Можно еще вопрос? Почему в задании 6 и 7 нужно прописывать ::before?
потому что коробки описаны как псевдоэлементы. в html нет никаких коробок
1 лайк