Grow your CSS skills. Land your dream job.

Selecting css properties AND curly brackets from CSS file in Komodo Edit

  • # January 7, 2013 at 4:37 pm

    How would one search, within a CSS file and using Komodo Edit, everything inside and including the brackets from every CSS style rule.

    I need to end up with a list of CSS classes and IDs erasing all properties from a very large CSS file.

    I need to turn this:

    .template{
    color: #FFF;
    }
    .template1{
    color:red;
    }
    into this:

    .template
    .template1

    Hence, I need to select everything within and including the curly brackets, and then deleting them.

    Thanks in advance.

    __
    # January 7, 2013 at 8:56 pm

    Open the Find dialog

    Check the “regex” checkbox

    This regex will find everything inside matching curly braces, and the braces themselves:

    `{[^}]*}`

    If you want to simply delete everything, you can use the Replace dialog instead, and replace the matches with an empty string.

    You can precede the regex with the class name to find a specific block, e.g.,

    `.template{[^}]*}`

    …though this will match the `.template` part also.

    # January 8, 2013 at 9:25 am

    Thank you so much, Traq. I will try this ASAP.

    :D

    Yep, works like a charm. Thanks again.

    # January 8, 2013 at 9:37 am

    Traq, let me see if I understand correctly:

    this: `{` finds the opening curly bracket

    this: `^` finds the beginning of a string.

    this: `}` finds the closing curly bracket.

    this: `*` finds ANY character

    this: `}` finds a closing curly bracket, again.

    I am a bit confused about the square brackets. What are those for?

    Thank you again.

    __
    # January 8, 2013 at 10:13 am

    not quite:

    `{` opening curly bracket

    `[…]` defines a *character class* (a *group* of characters to match against)

    `^` inside a character class, this means *not*

    `}` closing curly bracket
    (therefore, `^}` means *anything **except** a closing curly bracket*)

    `*` means zero or more of the previous

    `}` closing curly bracket.

    Therefore, you’re searching for an opening curly bracket, followed by zero or more characters that *are not* closing brackets (i.e., the block contents), followed by a closing curly bracket.

    # January 8, 2013 at 10:34 am

    Whooooa, I was WAY off. Thank you SO much for your explanation.

    __
    # January 8, 2013 at 10:33 pm

    no problem, glad I could help.

    *(BTW, `^` is indeed a “start” anchor, but only at the beginning of a pattern.)*

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".