Naive CSS properties query

Question

I know this is a basic question, but I haven't find the answer anywhere.

Are all CSS properties applicable to all html elements?

Or are there CSS properties that on apply to some html elements?

Thank you for your answers.

@raina77ow: Do you think he might be referring to something else and not a CSS property? — BoltClock, Feb 28 '18 at 12:03
See, both answers given talk about specific _combination_ of properties. But the OP mentions _html elements_, most probably making a distinction on tag level. — raina77ow, Feb 28 '18 at 13:02
@raina77ow the logic is the same ... all tag element can be considered as element, the only difference is the name [their semantic] and the default properties applied by the browser ... if we consider that there is 0 defaults properties, all the tags are almost equivalent if we omit some particular cases like interactive elements [input for example] — Temani Afif, Feb 28 '18 at 13:11

BoltClock · Answer 1 · 2018-02-28T12:24:41.947

Not all properties apply to all elements. Some properties apply only to specific elements; what sort of restrictions apply is determined by three things:

The CSS spec that defines the property
The document language (e.g. HTML)
Browser/device limitations

The vast majority of these restrictions are determined by the CSS spec, with numerous examples (these are just three out of hundreds):

No properties apply to elements with display: none, since they don't generate any boxes
The CSS table properties don't apply to elements that aren't any of the table-related display types
height does not apply to elements with display: inline

In some cases, the document language such as HTML will have its own restrictions which may or may not override those given by CSS (usually, they do), and in yet other cases, browser or device limitations may prevent a property from applying to specific elements, or indeed any element. These are far less common, though; in fact, I can't think of any element that isn't a form element that restricts CSS in specific ways.

Note that this is not the same thing as every element having a value for every CSS property in the cascade. The cascade has no relation to whether or not a property applies to an element.

i think he meant some properties that only apply in certain cases ... like all the properties that are considered only when using flex, and other only when using grid,etc. So yes we can apply them but they are ignored so in his logic they are not applicable [not pretty sure by the way what he meant] — Temani Afif, Feb 28 '18 at 12:13
@Temani Afif: Yeah, I should probably just leave out the part about having a value for every property altogether. — BoltClock, Feb 28 '18 at 12:13

Temani Afif · Accepted Answer · 2018-02-28T12:29:21.893

In addition to the answer of @BoltClock I would say that some properties are ignored in certain cases since they can be considered only if another property is set to a specific value.

Here is a simple example:

.box {
  justify-content:center; /*Has no effect and it's ignored*/
  height:100px;
  border:1px solid;
}
.box-alt {
  display:flex;
  justify-content:center; /*is considered because of display:flex*/
  height:100px;
  border:1px solid;
}

<div class="box">
text
</div>
<div class="box-alt">
text.
</div>

So when you check the MDN doc you can see this:

And if I take the display property which apply to all elements we can read this:

So yes you can apply all properties to all element BUT not all of them will be considered depending on your situation.

Naive CSS properties query

2 Answers2