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

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

  1. Viorteya

    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)
     
    GolDen777, olis, Siverus и 3 другим нравится это.
  2. omgh

    omgh Создатель

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

    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] - не найдёт