Viorteya
Создатель
- Регистрация
- 24 Апр 2013
- Сообщения
- 14
- Реакции
- 11
- Автор темы
- #1
Предлагаю в данной теме обмениваться примерами рабочих регулярных выражений для CSS.
1. Применить стиль для всех ссылок на изображения:
С таким же успехом можно указать любое другое расширение и применить стиль к прямым ссылкам на файлы в данном расширении.
2. Применить стиль ко всем внешним ссылкам:
В сцепке с ::before или ::after внешние ссылки можно даже пометить пиктограммами.
3. Применить стиль ко всем элементам с классом, содержащим определенный набор символов:
вместо div и p можно использовать любые другие элементы, вместо class также можно использовать id, а вместо dxg - любое необходимое вам сочетание. Конструкция может оказаться полезной для переоформления компонентов с закрытыми css. Например, у DevExpress все css зашиты в dll, но имена всех классов содержат dxg.
Эти конструкции с успехом работают во всех нормальных браузерах и IE 7+.
Есть еще кое-что, поддерживаемое IE только начиная с 9-ой версии (поддержка остальными браузерами есть с ранних версий) :
1. Применить стиль для каждого n-ого элемента данного типа:
В указанном примере стиль будет применяться к каждому первому li из каждых 2-х (проще говоря к каждому нечетному, но вместо 2n+1 можно использовать и любые другие сочетания: 15n+3 будут означать каждому третьему из пятнадцати и т.п.).
2. Применить стиль к каждому n-ому элементу типа с конца:
Стиль будет применен к 5-ому с конца элементу li. Вместо 5 можно использовать выражения по той же схеме, что и в пред. случае.
3. Применить стиль для каждого n-ого "ребенка"(child) элемента. Строится по тому же принципу, что и в случае с n-м элементом типа:
4. Применить стиль к каждому n-ому "ребенку" с конца(принцип снова тот же) :
1. Применить стиль для всех ссылок на изображения:
Код:
a[href$=".jpg"] { }
2. Применить стиль ко всем внешним ссылкам:
Код:
a[href^="http"] {}
3. Применить стиль ко всем элементам с классом, содержащим определенный набор символов:
Код:
div[class*=dxg] p
Эти конструкции с успехом работают во всех нормальных браузерах и IE 7+.
Есть еще кое-что, поддерживаемое IE только начиная с 9-ой версии (поддержка остальными браузерами есть с ранних версий) :
1. Применить стиль для каждого n-ого элемента данного типа:
Код:
li:nth-of-type(2n+1){}
2. Применить стиль к каждому n-ому элементу типа с конца:
Код:
li:nth-last-of-type(5)
3. Применить стиль для каждого n-ого "ребенка"(child) элемента. Строится по тому же принципу, что и в случае с n-м элементом типа:
Код:
div:nth-child (2n+1)
4. Применить стиль к каждому n-ому "ребенку" с конца(принцип снова тот же) :
Код:
div:nth-last-child(2n+1)