How to apply! important in a property with multiple values

Question

How to apply! important in a property with multiple values

Navigation

#1 by (4 votes)

8

I'm having some difficulties with the precedence of CSS selectors to create a dynamic background (transition of images.) in the first section / div displayed on the site. I currently have the following scenario:

HTML:

        <section id="intro" class="intro main style1 dark fullscreen">
            <div class="content container small">
                <header>
                    <h2 class="shade"></h2>
                </header>
                <p class="shade">[TEXTO]</p>
                <footer>
                    <a href="#one" class="button style2 down">Mais</a>
                </footer>
            </div>
        </section>
        ...
        <section id="intro4" class="intro main style1 dark fullscreen">
            <div class="content container small">
                <header>
                    <h2 class="shade"></h2>
                </header>
                <p class="shade">[TEXTO]</p>
                <footer>
                    <a href="#one" class="button style2 down">Mais</a>
                </footer>
            </div>
        </section>

CSS: (the "ideal" would be, where I have specific properties by ID and generic properties that apply to all, by class.)

#intro {
    background: url('images/overlay.png'), url('../images/intro.jpg');
}
#intro2 {
    background: url('images/overlay.png'), url('../images/intro2.jpg');
}
#intro3 {
    background: url('images/overlay.png'), url('../images/intro3.jpg');
}
#intro4 {
    background: url('images/overlay.png'), url('../images/intro4.jpg');
}
.intro {
    background-size: 256px 256px, cover;
    background-attachment: fixed, fixed;
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
}

To avoid repetition and do something like:

#intro {
    background: url('images/overlay.png'), url('../images/intro.jpg');
    background-size: 256px 256px, cover;
    background-attachment: fixed, fixed;
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
}
...
#intro4 {
    background: url('images/overlay.png'), url('../images/intro4.jpg');
    background-size: 256px 256px, cover;
    background-attachment: fixed, fixed;
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
}

I thought of invoking the !important property, which would cause the class selector (which would normally be overridden by background-size: initial and background-attachment: initial , since ids to have precedence over classes.) did not have to be repeated, if approaching a DRY concept (Do not Repeat Yourself) - Suggestions on how to make DRY more "welcome".

I've done this on properties like font-size: 200% !important and clearly worked OK. However, in selectors with more than one value, such as background-size and background-attachment , the Property inspector (in my case, Chrome Dev Tools ). ) says that the following property would be invalid:

background-attachment: fixed !important, fixed !important;

While the following:

background-attachment: fixed, fixed !important;

Does not bring the expected result.

Could someone tell me if:

(1) It is possible to add !important to a shorthand property with multiple values (2) If it is possible, how to do it, observing the best practices and (3) If there is another way to achieve the same result while preserving the current HTML structure (since I need some generic templates only in these % / <sections> , although each has its own background with image.), what it would be and how to implement it.

css css3

asked by anonymous 02.01.2015 / 19:13

1 answer

Recommended way to populate variables with bank data Error "HTML contains invalid UTF-8 character (s)" when using mpdf

score 4 · Accepted Answer

I believe the correct thing is:

background-attachment: fixed, fixed !important;

While not bringing the result you expect, this rule in the class overrides the rule set for the ID. However, it is best to avoid using !important because it makes the code harder to maintain. An interesting link about this:

link

I think the biggest problem with your code is that the ID rule is overwriting the class rule, since you set rules for background on both. Would not it be simpler for you to turn those IDs into classes? That way you would have classes that define more generic rules and classes that define more specific rules and this solves your problem of ID precedence, without having to use !important . Something like:

HTML:

<section class="intro intro1">
...
</section>

CSS:

.intro1 {
  background: url('images/overlay.png'), url('../images/intro.jpg');
}
...
.intro {
  background-size: 256px 256px, cover;
  background-attachment: fixed, fixed;
  background-position: top left, bottom center;
  background-repeat: repeat, no-repeat;
}