Селектор по атрибутам вида [foo|="bar"]

В данном случае будут выбраны все элементы, у которых значение атрибута foo содержит префикс bar, то есть либо полностью совпадает с bar, либо начинается со строки bar- (наличие знака переноса существенно). Другими словами, используя уже знакомые записи селекторов, этот можно заменить на два:
1. [foo="bar"] — все элементы, у которых значение атрибута foo полностью совпадает со значением bar.
2. [foo^="bar-"] — все элементы, у которых значение атрибута foo начинается со значения bar-.