foobar'ы

Не могу понять вообще, в чем разница между всеми [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 баллов. Огромное спасибо :slight_smile:

Я собственно к чему, допустим есть несколько инпутов с именем “ya-slogan-mechty”.
Input[name=“slogan”] не выберет ничего, т.к в точности не соответствует, а
Input[name*=“slogan”] выберет все инпуты содержащие строчку “slogan” в имени.

Теперь уж точно все понял. Спасибо =)

Можно еще вопрос? Почему в задании 6 и 7 нужно прописывать ::before?

потому что коробки описаны как псевдоэлементы. в html нет никаких коробок

1 Симпатия