Регулярные выражения в CSS

Viorteya

Создатель
Регистрация
24 Апр 2013
Сообщения
14
Реакции
11
Предлагаю в данной теме обмениваться примерами рабочих регулярных выражений для CSS.

1. Применить стиль для всех ссылок на изображения:
Код:
a[href$=".jpg"] { }
С таким же успехом можно указать любое другое расширение и применить стиль к прямым ссылкам на файлы в данном расширении.

2. Применить стиль ко всем внешним ссылкам:
Код:
a[href^="http"] {}
В сцепке с ::before или ::after внешние ссылки можно даже пометить пиктограммами.

3. Применить стиль ко всем элементам с классом, содержащим определенный набор символов:
Код:
div[class*=dxg] p
вместо div и p можно использовать любые другие элементы, вместо class также можно использовать id, а вместо dxg - любое необходимое вам сочетание. Конструкция может оказаться полезной для переоформления компонентов с закрытыми css. Например, у DevExpress все css зашиты в dll, но имена всех классов содержат dxg.

Эти конструкции с успехом работают во всех нормальных браузерах и IE 7+.

Есть еще кое-что, поддерживаемое IE только начиная с 9-ой версии (поддержка остальными браузерами есть с ранних версий) :
1. Применить стиль для каждого n-ого элемента данного типа:
Код:
li:nth-of-type(2n+1){}
В указанном примере стиль будет применяться к каждому первому li из каждых 2-х (проще говоря к каждому нечетному, но вместо 2n+1 можно использовать и любые другие сочетания: 15n+3 будут означать каждому третьему из пятнадцати и т.п.).

2. Применить стиль к каждому n-ому элементу типа с конца:
Код:
li:nth-last-of-type(5)
Стиль будет применен к 5-ому с конца элементу li. Вместо 5 можно использовать выражения по той же схеме, что и в пред. случае.

3. Применить стиль для каждого n-ого "ребенка"(child) элемента. Строится по тому же принципу, что и в случае с n-м элементом типа:
Код:
div:nth-child (2n+1)

4. Применить стиль к каждому n-ому "ребенку" с конца(принцип снова тот же) :
Код:
div:nth-last-child(2n+1)
 

omgh

Создатель
Регистрация
22 Сен 2013
Сообщения
21
Реакции
14
Расшифровка операторов:
  • = — Определенное значение в точности равное атрибуту.
  • *= — [CSS3] определенное значение где-то в атрибуте.
  • ^= — [CSS3] определенное значение в начале этого атрибута
  • $= — [CSS3] определенное значение в конце атрибута
  • ~= — Определенное значение находится в пределах списка, разделённого пробелами (в атрибуте)
  • |= — Определенное значение в списке, разделённого дефисом (в атрибуте).
 

y371

Писатель
Регистрация
21 Сен 2017
Сообщения
5
Реакции
2
это не регулярные выражения всё же...

|= — Определенное значение в списке, разделённого дефисом (в атрибуте).
уточню. значение селектора должно точно совпадать со значением аттрибута или, если в аттрибуте есть дефис, то с левой частью от дефиса.
<p class="one-two-three">...</p>
p[class|=one] - найдёт
p[class|=one-two] - найдёт
p[class|=one-two-three] - найдёт
p[class|=two] - не найдёт
 
Сверху