Search code examples
htmlcssinlinedisplay

How to select child attribute in inline style html

In css it's possible this:

<style type="text/css">
  section br {
    display:none;
  }
</style>

How to do that but in inline tag, for example:

<section style="section br { display:none;}  ">
         <br />
         <br />
         <br />
         <br />
</section>

My intention is not display tag
inside some specific section, but I can use just inline, not possible in this case with external css or tag inside

Cold someone help me, it would be amazing!

Solution

  • The short answer is: You can't do that.

    It is not possible to add inline styles that can also be applied to the child. You can refer to the style attribute spec (https://www.w3.org/TR/css-style-attr/) which succinctly, albeit somewhat cryptically, explains it.

    The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces)...

    The declarations in a style attribute apply to the element to which the attribute belongs. In the cascade, these declarations are considered to have author origin and a specificity higher than any selector. CSS2.1 defines how style sheets and style attributes are cascaded together. [CSS21] Relative URLs in the style data must be resolved relative to the style attribute's element (or to the document if per-element resolution is not defined) when the attribute's value is parsed.

    Aside from the differences in cascading, the declarations in a style attribute must be interpreted exactly as if they were given in a CSS style rule that applies to the element.