Какая разница между [foo*="bar"], [foo~="bar"] и [foo|="bar"]

Совсем не вижу разницы между этими методами поиска внутри атрибутов.
Задания в курсе так же не помогают понять принципиального отличия.
Помогите разобраться :slight_smile:

[foo*=“bar”] - поиск подстроки везде. Будут выбраны все элементы, у которых значение атрибута foo содержит подстроку “bar” на любой позиции.

[foo~=“bar”] - поиск слов внутри строки. Такой селектор выберет все элементы, у которых значение атрибута “foo” содержит слово “bar”.

[foo|=“bar”] - В данном случае будут выбраны все элементы, у которых значение атрибута “foo” содержит префикс “bar”, то есть либо полностью совпадает с “bar”, либо начинается со строки “bar-”.

1 лайк

Помогают, просто надо внимательно читать.
В описании первого [foo*=“bar”] упоминается “подстройка” bar - то есть часть слова.
В описании второго [foo~=“bar”] - bar - это целое слово.
В описании третьего [foo|=“bar”] даже разделяют на два селектора, чтобы было понятно:
[foo=“bar”] - значение атрибута равно bar.
[foo^=“bar-”] - значение атрибута начинается с bar.
В некотором смысле третье - это комбинация первого и второго.

1 лайк

Помогают, просто надо внимательно читать

Спасибо за объяснение - стало понятнее, но имхо это не я невнимательно читал, а текст и примеры недостаточно внятные чтобы продемонстрировать разницу между селекторами.

В любом случае вы всегда можете почитать дополнительно по каждой теме, которая вызывает вопросы. Теория в курсах - это минимум, есть еще книги, сайты-справочники.