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

Тема в разделе "Регулярные выражения", создана пользователем Viorteya, 15 июл 2013.

Модераторы: xpert13
  1. Viorteya

    Viorteya Создатель

    Регистр.:
    24 апр 2013
    Сообщения:
    14
    Симпатии:
    10
    Предлагаю в данной теме обмениваться примерами рабочих регулярных выражений для 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)
     
    olis, Siverus, matrixid и 2 другим нравится это.
  2. omgh

    omgh Создатель

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