f



Override CSS Declaration?

   Is there a way to override or bypass a css definition?  I have the 
following "td" declaration that I use frequently, but occasionally I 
don't want to use it.  I tried the following "td.nil" and used 
<td class="nil">...which had no effect.  How can I do this sort of 
"exception"?  TIA

td {
     padding-left:  20px;
     padding-right:  0px;
     padding-top:    0px;
     padding-bottom: 0px;
   }
td.nil {}



---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

0
MikeCopeland
9/3/2016 12:50:30 AM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

10 Replies
153 Views

Similar Articles

[PageSpeed] 5

In article <MPG.3233cc41c5f72c29896d0@news.eternal-september.org>,
 MikeCopeland <mrc2323@cox.net> wrote:

>    Is there a way to override or bypass a css definition?  I have the 
> following "td" declaration that I use frequently, but occasionally I 
> don't want to use it.  I tried the following "td.nil" and used 
> <td class="nil">...which had no effect.  How can I do this sort of 
> "exception"?  TIA
> 
> td {
>      padding-left:  20px;
>      padding-right:  0px;
>      padding-top:    0px;
>      padding-bottom: 0px;
>    }
> td.nil {}

You actually used the above literally? 

You could try

td.nil {padding: 0;}

Or the shorter 

..nil (padding:0;}

and put the class on the table cells you want.

Or use

table.nil td {padding: 0;}

and put the class on the tables you want all the cells to be affected 
by.

-- 
dorayme
0
dorayme
9/3/2016 3:59:52 AM
3.9.2016, 6:59, dorayme wrote:

> In article <MPG.3233cc41c5f72c29896d0@news.eternal-september.org>,
>  MikeCopeland <mrc2323@cox.net> wrote:
>
>>    Is there a way to override or bypass a css definition?  I have the
>> following "td" declaration that I use frequently, but occasionally I
>> don't want to use it.  I tried the following "td.nil" and used
>> <td class="nil">...which had no effect.  How can I do this sort of
>> "exception"?  TIA
>>
>> td {
>>      padding-left:  20px;
>>      padding-right:  0px;
>>      padding-top:    0px;
>>      padding-bottom: 0px;
>>    }
>> td.nil {}
>
> You actually used the above literally?

I think he did. This would be based in a misunderstanding of the meaning 
of an empty declaration list in �{}�. It does not mean �Don�t apply any 
styles� but �I have nothing to say here�.

The way to override a CSS declaration is to use a declaration that is 
higher in the cascade and that explicitly sets properties to desired 
values. There is no way to override a CSS declaration in the sense of 
setting a property to the (browser-)default value. (The value initial, 
e.g. padding: initial, does not do that. It sets a property to the 
initial value of the property as defined in CSS specs, e.g. padding: 0, 
with no regard to browser defaults.)

> You could try
>
> td.nil {padding: 0;}

You can do that, but it sets padding to zero, not to the value it would 
have if the rule with padding-left:  20px etc. were not there. In the 
absence of that rule, and other rules that might set padding for the 
element, browsers apply small padding for td elements. In addition to 
being common (probably universal) browser behavior, it is also 
�suggested rendering� in HTML5:
https://www.w3.org/TR/html5/rendering.html#tables
says:

td, th { padding: 1px; }

To �restore� that for td elements in class �nil�, you would of course use

td.nil { padding: 1px; }

In principle, each browser may have other defaults for td elements. The 
1px default is really a typical compromise: a decision that combines the 
drawbacks of various good ideas. It is too small, especially 
horizontally, for data tables containing text, and it causes a one-pixel 
disturbance for layout tables. But in practice, browser vendors will 
probably keep using the �suggested� defaults.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
9/3/2016 5:37:12 AM
On 03/09/2016 08:37, Jukka K. Korpela wrote:
> ... There is no way to override a CSS declaration in the sense of
> setting a property to the (browser-)default value. (The value initial,
> e.g. padding: initial, does not do that. It sets a property to the
> initial value of the property as defined in CSS specs, e.g. padding: 0,
> with no regard to browser defaults.)

I was under the impression that here the revert keyword would achieve 
browser defaults, well in theory, at least, but I'm not sure I'm 
understanding it correctly:

https://www.w3.org/TR/css-cascade-4/#valdef-all-revert

http://caniuse.com/#search=revert

And out of curiosity, would some kind soul test with Safari to see if 
there is a difference between 'initial' and 'revert', in this case at hand?

-- 
Best wishes, Osmo
0
Osmo
9/3/2016 6:34:03 AM
3.9.2016, 9:34, Osmo Saarikumpu wrote:

> I was under the impression that here the revert keyword would achieve
> browser defaults, well in theory, at least, but I'm not sure I'm
> understanding it correctly

I think you understand it correctly, but it mainly exists in the mutable 
theory of CSS. It used to be called “default” in earlier drafts. And 
even though the CSS “module” defining it has now reached Candidate 
Recommendation level, it’s still far from being useful (in WWW 
authoring). Besides, being supported by essentially one implementation 
only (Safari) also prevents adoption as a W3C Recommendation.

Thank you for pointing at the developments. This also indirectly but 
clearly indicates that there is no “reset to browser defaults” in CSS as 
implemented now in any major browser – they surely would not discuss 
adding a new feature if existing features could be used for the purpose.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
9/3/2016 10:24:08 AM
In article <nqe8c5$8r3$1@dont-email.me>, jkorpela@cs.tut.fi says...
> 
> 3.9.2016, 9:34, Osmo Saarikumpu wrote:
> 
> > I was under the impression that here the revert keyword would achieve
> > browser defaults, well in theory, at least, but I'm not sure I'm
> > understanding it correctly
> 
> I think you understand it correctly, but it mainly exists in the mutable 
> theory of CSS. It used to be called ?default? in earlier drafts. And 
> even though the CSS ?module? defining it has now reached Candidate 
> Recommendation level, it?s still far from being useful (in WWW 
> authoring). Besides, being supported by essentially one implementation 
> only (Safari) also prevents adoption as a W3C Recommendation.
> 
> Thank you for pointing at the developments. This also indirectly but 
> clearly indicates that there is no ?reset to browser defaults? in CSS as 
> implemented now in any major browser ? they surely would not discuss 
> adding a new feature if existing features could be used for the purpose.

An interesting discussion which is a useful reminder of the gaps in my 
knowledge - so this is offered tentatively!  Would this work?

td {
     padding-left:  20px;
     padding-right:  0px;
     padding-top:    0px;
     padding-bottom: 0px;
   }
td.nil {padding: inherit;}


-- 

Phil, London
0
Philip
9/3/2016 11:07:44 AM
3.9.2016, 14:07, Philip Herlihy wrote:

> An interesting discussion which is a useful reminder of the gaps in my
> knowledge - so this is offered tentatively!  Would this work?
>
> td {
>      padding-left:  20px;
>      padding-right:  0px;
>      padding-top:    0px;
>      padding-bottom: 0px;
>    }
> td.nil {padding: inherit;}

It would “work” accidentally for some values of “worK”, but not in the 
sense of setting padding to browser defaults.

The value “inherit” causes (when applied) the value of the property to 
be inherited from the parent element. In any valid document, a td 
element is a child of a tr element. By browser defaults, tr elements 
have zero padding, but this can be changed in a style sheet (though it 
is difficult to imagine a good reason for that). If you simply want to 
remove all padding, padding: 0 is much more reliable.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
9/3/2016 12:22:38 PM
MikeCopeland wrote:

>    Is there a way to override or bypass a css definition?  I have the
> following "td" declaration that I use frequently, but occasionally I
> don't want to use it.  I tried the following "td.nil" and used
> <td class="nil">...which had no effect.  How can I do this sort of
> "exception"?  TIA
> 
> td {
>      padding-left:  20px;
>      padding-right:  0px;
>      padding-top:    0px;
>      padding-bottom: 0px;
>    }

As you have found out now, it is a bad idea to have a selector based on an 
element type alone because that usually matches too many elements.  Keep in 
mind that this is a special case, so it should be treated specially.  That 
is, use a class name as selector, and specify that class on an eleemnt if 
and only if you want the padding to be set this way.

The only alternative is to set properties in a ruleset with another selector 
(this should be based on a class, too) to whatever *you* consider to be the 
defaults, as you cannot reset them to the layout engine’s defaults this way 
cross-engine (there is a CSS scripting hack for this but you do not want to 
use it).  That ruleset either needs to have a selector with the same 
specificity and follow this ruleset, or its selector needs to have greater 
specificity, or the pertaining property declaration in the *other* ruleset 
needs to have the “!important” modifier.  It is recommended to avoid 
“!important” declarations, and to depend on selector specificity and ruleset 
order, in that order, instead.

It is likely that you want to format table cells only when in the context of 
a specific table.  In that case, a common ancestor, for example the “table” 
element, can be given a class name that provides this context.  Still, it is 
wise not to use the “td” element type selector anyway (see above).

See also <http://cssguideline.es/>.

> td.nil {}

There are no property declarations in this rule, so it does nothing.  The 
“cascading” in “Cascading Style Sheets” means that you can override 
declarations only with other declarations, whereas a declaration in the 
ruleset with the more specific selector overrides the same declaration in a 
ruleset with a less specific selector, unless the latter, and only it, uses 
the “!important” modifier.  (“style” attribute values should trump all 
non-“!important” rules and should therefore be used sparingly.)
 
> ---
> […]

Your name is still not a real one, this is still not e-mail, and your 
newsreader is still misconfigured to post spam at the bottom.  Repeated 
failure to follow recommendations given to you is going to result in a 
diminishing readership of your postings.  You have been warned.


PointedEars
-- 
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16
0
Thomas
9/3/2016 6:53:01 PM
Sat, 3 Sep 2016 15:22:38 +0300, Jukka K. Korpela:
> 3.9.2016, 14:07, Philip Herlihy wrote:
>
>> An interesting discussion which is a useful reminder of the gaps 
>> in my knowledge - so this is offered tentatively!  Would this work?
>>
>> td {
>>      padding-left:  20px;
>>      padding-right:  0px;
>>      padding-top:    0px;
>>      padding-bottom: 0px;
>>    }
>> td.nil {padding: inherit;}
>
> It would “work” accidentally for some values of “worK”, but not in 
> the sense of setting padding to browser defaults.
>
> The value “inherit” causes (when applied) the value of the 
> property to be inherited from the parent element. In any valid 
> document, a td element is a child of a tr element. By browser 
> defaults, tr elements have zero padding, but this can be changed 
> in a style sheet (though it is difficult to imagine a good reason 
> for that). If you simply want to remove all padding, padding: 0 is 
> much more reliable.

I see there's also 'unset' value:

https://developer.mozilla.org/en-US/docs/Web/CSS/unset

May be one could use:

td.nil {
   padding: unset;
   padding: reset;
}

On another note one could also just use:

td:not(.nil) {
   padding-left:  20px;
   padding-right:  0px;
   padding-top:    0px;
   padding-bottom: 0px;
}

-- 
Stanimir

0
Stanimir
9/3/2016 8:14:55 PM
3.9.2016, 23:14, Stanimir Stamenkov wrote:

> I see there's also 'unset' value:
>
> https://developer.mozilla.org/en-US/docs/Web/CSS/unset

That page says: “This keyword resets the property to its inherited value 
if it inherits from its parent or to its initial value if not. In other 
words, it behaves like the inherit keyword in the first case and like 
the initial keyword in the second case.”

The padding property is not inherited, so setting padding: unset is 
equivalent to padding: initial, which is equivalent to padding: 0. If 
that’s what you want, then surely using the value 0 is safest. But this 
does not mean setting to browser defaults.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
9/3/2016 9:08:55 PM
Sun, 4 Sep 2016 00:08:55 +0300, Jukka K. Korpela:
> 3.9.2016, 23:14, Stanimir Stamenkov wrote:
>
>> I see there's also 'unset' value:
>>
>> https://developer.mozilla.org/en-US/docs/Web/CSS/unset
>
> That page says: “This keyword resets the property to its inherited 
> value if it inherits from its parent or to its initial value if 
> not. In other words, it behaves like the inherit keyword in the 
> first case and like the initial keyword in the second case.”
>
> The padding property is not inherited, so setting padding: unset 
> is equivalent to padding: initial, which is equivalent to padding: 
> 0. If that’s what you want, then surely using the value 0 is 
> safest. But this does not mean setting to browser defaults.

My point is it might achieve sufficient 'reset' effect in enough 
situations.

-- 
Stanimir

0
Stanimir
9/4/2016 8:33:29 AM
Reply: