Что значит данная запись в CSS?

#css

Что значит данная запись в CSS?

div[class^=col]


И насколько это кроссбраузерно?
    

Ответы

Ответ 1

Это означает div с классом, начинающимся с указанного текста col. 
.col1, .column, .col-12 попадают под селектор.

Это довольно старая инструкция, у нее отличная кроссбраузерность


Ответ 2

Значение атрибута начинается с определённого текста


  Устанавливает стиль для элемента в том случае, если значение атрибута
  тега начинается с указанного текста. Синтаксис применения следующий.


[атрибут^="значение"] { Описание правил стиля } 
Селектор[атрибут^="значение"] { Описание правил стиля }



  В первом случае стиль применяется ко всем элементам, у которых
  значение атрибута начинаются с указанного текста. А во втором — только
  к определённым селекторам. Использование кавычек не обязательно, но
  только если значение содержит латинские буквы и без пробелов.


Пример:



a[href^="http://"] { 
  font-weight: bold /* Жирное начертание */
 }
Обычная ссылка | 
  Внешняя 
  ссылка на сайт htmlbook.ru




Внешние ссылки начинающиеся с ключевого слова http:// будут выделены жирным начертанием.

Источник

P.S: там же и о других селекторах атрибутов.


Ответ 3

[attr^="val"] означает, что выбрать элемент, атрибут которого начинается с val, например
"value".

У вас значит выбрать div у которого class начинается с col

На сколько кроссбраузерно можно посмотреть на всеизвестном ресурсе caniuse

В частности получается так:



В целом селекторы можно посмотреть на w3schools