regex101: CSS @media selector

Explanation

Pro

Group 1(@.*?:[^}{@]+(\{(?:[^}{]+|\{(?:[^}{]+|\{[^}{]*\})*\})*\}))

@the literal @ (64₁₀ / 100₈ / 40₁₆)

.*?any character (except for line terminators), repeated any number of times

:the literal : (58₁₀ / 72₈ / 3A₁₆)

Negated Character Class[^}{@]+

+matches at least one character outside the set below:

}the literal } (125₁₀ / 175₈ / 7D₁₆)

{the literal { (123₁₀ / 173₈ / 7B₁₆)

@the literal @ (64₁₀ / 100₈ / 40₁₆)

Group 2(\{(?:[^}{]+|\{(?:[^}{]+|\{[^}{]*\})*\})*\})

\{the literal { (123₁₀ / 173₈ / 7B₁₆)

Non-Capturing Group(?:[^}{]+|\{(?:[^}{]+|\{[^}{]*\})*\})*

*repeats the group contents below any number of times:

1st Alternative[^}{]+

Negated Character Class[^}{]+

+matches at least one character outside the set below:

}the literal } (125₁₀ / 175₈ / 7D₁₆)

{the literal { (123₁₀ / 173₈ / 7B₁₆)

2nd Alternative\{(?:[^}{]+|\{[^}{]*\})*\}

\{the literal { (123₁₀ / 173₈ / 7B₁₆)

Non-Capturing Group(?:[^}{]+|\{[^}{]*\})*

*repeats the group contents below any number of times:

1st Alternative[^}{]+

Negated Character Class[^}{]+

+matches at least one character outside the set below:

}the literal } (125₁₀ / 175₈ / 7D₁₆)

{the literal { (123₁₀ / 173₈ / 7B₁₆)

2nd Alternative\{[^}{]*\}

\{the literal { (123₁₀ / 173₈ / 7B₁₆)

Negated Character Class[^}{]*

*matches any number of characters outside the set below:

}the literal } (125₁₀ / 175₈ / 7D₁₆)

{the literal { (123₁₀ / 173₈ / 7B₁₆)

\}the literal } (125₁₀ / 175₈ / 7D₁₆)

Global pattern flags

g modifier: global. Finds all matches instead of stopping after the first

Quick Reference

26 tokens

Regular Expression

(@.*?:[^}{@]+(\{(?:[^}{]+|\{(?:[^}{]+|\{[^}{]*\})*\})*\}))

CSS @media selector
.CSS Code sample test
@media screen and (min-width:0) and (max-width:640px) {
    body.overlap .page-title .wf-wrap {
        padding-top: 0!important;
        padding-bottom: 4px!important
    }
    .h3-size {
        font: normal 17px / 21px "Roboto",Helvetica,Arial,Verdana,sans-serif!important
    }
    body.breadcrumbs.breadcrumbs-bg {
        margin-top: 0!important
    }
    .page-title .breadcrumbs,.page-title .breadcrumbs a {
        font-size: 11px!important
    }
}
@-webkit-keyframes fadeIn {0% { opacity: 0; }100% { opacity: 1; }}

@media screen and (max-width:200px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
.widget_1 {padding-right:0}
}
/* TEST NESTED @media: */
@media screen and (max-width:200px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
/* TEST NESTED @media capturing everything, comments too */
@media screen and (max-width:359px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
.widget_1 {padding-rig

Substitution

CSS @media selector
.CSS Code sample test
@media screen and (min-width:0) and (max-width:640px) {
    body.overlap .page-title .wf-wrap {
        padding-top: 0!important;
        padding-bottom: 4px!important
    }
    .h3-size {
        font: normal 17px / 21px "Roboto",Helvetica,Arial,Verdana,sans-serif!important
    }
    body.breadcrumbs.breadcrumbs-bg {
        margin-top: 0!important
    }
    .page-title .breadcrumbs,.page-title .breadcrumbs a {
        font-size: 11px!important
    }
}
@-webkit-keyframes fadeIn {0% { opacity: 0; }100% { opacity: 1; }}

@media screen and (max-width:200px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
.widget_1 {padding-right:0}
}
/* TEST NESTED @media: */
@media screen and (max-width:200px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
/* TEST NESTED @media capturing everything, comments too */
@media screen and (max-width:359px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
.widget_1 {padding-rig