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

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