Regular Expression (php) to match a property in within a CSS rule

Question

I want to write a regular expression to match (Please note that I'm not concerned with the php functions and usage, my concern is regexp and I have given the clue of php to clarify the usage):

to match a rule if it contains the property "height" in it. What I have primarily written:

^.nav+(.*)+({)+(.*)

But I do not what should I write after that... And here is our subject:

.nav,[role~=navigation]{
    clear:both;
    background:lightgrey;
    color:#5a5a5a;
    border:1px solid #c6c6c6;
    -o-border-radius:4px;
    border-radius:4px
}

.nav:after,[role~=navigation]:after{
    content:" ";
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden
}

.nav a,.nav a:visited,.nav button{
    background:lightgrey;
    color:#5a5a5a;
    cursor:pointer;
    padding:.25em 1em;
    text-decoration:none;
    cursor:pointer;
    line-height:1.5;
    border:0;
    border-top:1px solid #c6c6c6;
    -o-border-radius:0;
    border-radius:0
}

rvalvik · Accepted Answer · 2014-02-24 12:48:10Z

1

You could try something like this:

^\.nav.*?\{[^}]+(?<=[\s;])height\s*:[^}]+\}

Matches a whole .nav css rule block. (The ^\.nav.*?\{[^}]\} part) Inside of it we add a height: with a look-behind to assert that the previous character is either a ; or a whitespace. Then we need to gobble up the rest of the characters to match the whole block.

If all you want to do is find the rule blocks that have height in them, not match the whole block, then the following is sufficient:

^\.nav.*?\{[^}]+(?<=[\s;])height\s*:

Note that . has special meaning in regex, so matching .nav matches nav preceeded by any character, to match a full stop character we need to escape it: \.

edited Feb 24, 2014 at 12:48

answered Feb 24, 2014 at 11:30

rvalvik

1,55911 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KristofMorva Over a year ago

Just a question, don't you need to write height\s+: instead of height:? I have never tried, but I think it should be possible to write whitespace there.

Mostafa Talebi Over a year ago

I think it's better to use literal character for space for its readability

rvalvik Over a year ago

I think you are right in that you could have spaces there. + means 1 or more however, so \s+ would require a space there. \s* however would gobble up any whitespaces (although it might match newlines as well depending on the regex settings/flavor). I'll update my answer.

KristofMorva · Accepted Answer · 2014-02-24 11:16:17Z

1

It is not tested, but probably you can see the idea from this draft:

.nav.*?{([^}]*;|\s*)height

Here we check, if height keyword is found after { or a ; (so it is a property name).

answered Feb 24, 2014 at 11:16

KristofMorva

6481 gold badge7 silver badges13 bronze badges

Comments

Mobin Skariya · Accepted Answer · 2014-02-24 11:28:29Z

1

try this

.nav.*{.*(\bheight\s*:.*;).*}

answered Feb 24, 2014 at 11:28

Mobin Skariya

3923 silver badges12 bronze badges

Collectives™ on Stack Overflow

Regular Expression (php) to match a property in within a CSS rule

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related