3

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

div[class^=col]

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

3 ответа 3

4

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

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

4

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

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

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

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

Пример:

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

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

Источник

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

3

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

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

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

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

введите сюда описание изображения

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.