/    Sign up×
Community /Pin to ProfileBookmark

CSS statement priorities

Copy linkTweet thisAlerts:
Jul 18.2017

I found the following CSS as part of some code to control the display of an accordion menu. The menu works fine, but I do not understand the following statements [COLOR=”#FF0000″](highlighted in red with comments)[/COLOR] as they relate to the priority of execution.

[code]
 .ac-container label {
[COLOR=”#FF0000″] height: 30px !important; /* !important over-rides statements below? */
line-height: 21px !important;
font-size: 12px !important; [/COLOR]
font-family: ‘Open Sans’,’Arial Narrow’,Arial,sans-serif !important;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
[COLOR=”#FF0000″] height: 30px; /* required ??? (see above and below) */
[/COLOR] cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
[COLOR=”#FF0000″]/*
line-height: 33px;
font-size: 19px;
*/[/COLOR]
background: #fff;
background: -moz-linear-gradient(top,#fff 1%,#aaeaea 100%); /* #eaeaea */
background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#aaeaea));
background: -webkit-linear-gradient(top,#fff 1%,#aaeaea 100%);
background: -o-linear-gradient(top,#fff 1%,#aaeaea 100%);
background: -ms-linear-gradient(top,#fff 1%,#aaeaea 100%);
background: linear-gradient(top,#fff 1%,#aaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fff’,endColorstr=’#aeaea’,GradientType=0 );
box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
[COLOR=”#FF0000″]/* font-size: 12px; height: 30px; line-height: 20px; */[/COLOR]
}
[/code]

Why do the height, line-height and font-size change three times from the start to the end of the block? Does the ‘!important’ addition to the 1st entries make the following statements moot and therefore unnecessary? Can the last two definiitons be deleted without ill effect?

Note, I can provide the entire code if necessary for the discussion.

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulJul 20.2017 — It is my understanding that "!important" modifies the priority, so that it over-rides subsequent re-definitions. Hence subsequent redefinitions are ineffectual. However, whether they can be safely removed is another matter. E.g. There could be code on the server which dynamically removes the "!important". If so the "redundant" code would become effectual. Similar effects may be achieved with JavaScript, but I'm not sure of that? It depends on when the changes wrought by JS come into effect...
Copy linkTweet thisAlerts:
@JMRKERauthorJul 20.2017 — 'jedaisoul', thanks for your response. ?

As far as I can tell, the original code is for an accordion menu or FAQ type display

that is standalone at this time and does not rely on any JS to control the dynamics of the page.

I was not planning on removing the "!important" lines, just wondering why the subsequent lines

are even in the CSS definition. It appears to me that they are the ones that could be removed

without any noticeable difference in actions. (I tried that and it proves true for my observations).

I was asking to see if they could be removed without ill effects (which I might not initially see).

I understand that the CSS could be use elsewhere, but I don't see how the "redundant" lines could take effect if the "!important" statements remain in the order presented, and if so, why are they changed twice in the following statements.
Copy linkTweet thisAlerts:
@rtretheweyJul 21.2017 — I may have overlooked someone else pointing this out, but to be clear, the subsequent repeated rules are actually commented out (ie. they're enclosed in "/*" and "*/" markers) so they have no effect. It's not uncommon to see such things in development code, but it feels kinda sloppy to find it in production versions.

The "!important" rule tells the browser to ignore the normal precedence 'cascade" and use this definition.
Copy linkTweet thisAlerts:
@JMRKERauthorJul 21.2017 — I commented them out intentionally to make it easier to see when I bolded them in the red color for my question.

Imagine the CSS without the /* */ and you will see my question.
Copy linkTweet thisAlerts:
@jedaisoulJul 28.2017 — I answered your question:

There could be code on the server which dynamically removes the "!important". If so the "redundant" code would become effectual.
[/quote]
Copy linkTweet thisAlerts:
@JMRKERauthorJul 28.2017 — I answered your question:[/QUOTE]

Might be a good answer, but it's not for me as I am not using a server.

The CSS is part of a local file (which I don't think matters anyway).
Copy linkTweet thisAlerts:
@evoluerJul 29.2017 — Hi jmrker,

There is no explanation for this. It is just sloppy work from the developer. We can override !important using jquery, but still it doesnt make sense here
Copy linkTweet thisAlerts:
@JMRKERauthorJul 29.2017 — Hi jmrker,

There is no explanation for this. It is just sloppy work from the developer. We can override !important using jquery, but still it doesnt make sense here[/QUOTE]

Thank you 'evoluer'.

That was my suspicion, but lack the experience to believe my own conclusions. ?
Copy linkTweet thisAlerts:
@homautomationJul 31.2017 — Find the statements of Countryside Stewardship funding priorities to help achieve a successful application.
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...