Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can inline CSS apply to child elements nested in the styled element?

Tags:

html

css

This is the problem in a nutshell:

  • I want to apply the style vertical-align: top to every <tr> in a table, without manually applying the style to every row.
  • I have to use inline CSS because I'm on a wiki, so I can't edit the external style sheet, or edit the <head> to embed a style.
  • When I add a style attribute to a <table> tag, it appears this style is not passed on to its child elements. (I can see how this is nearly always a good thing.)
  • I can't use <style><!--...--></style>, because that is not a permitted tag on MediaWiki pages.

Should I resign myself to adding style="vertical-align: top to every <tr>, or is still a solution I am overlooking?

EDIT: Removed a lump of background info, in order to limit the question to what the question title suggests it is about.

like image 703
Esteis Avatar asked May 31 '12 11:05

Esteis


People also ask

Does CSS apply to child elements?

It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinators (>), which are placed between two CSS selectors. For example, div > p selects all <p> elements where the parent is a <div> element.

Which CSS style rules can you apply to an inline element?

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.

Why should inline styling be avoided?

Inline styles, while they have a purpose, generally are not the best way to maintain your website. They go against every one of the best practices: Inline styles don't separate content from design: Inline styles are exactly the same as embedded font and other clunky design tags that modern developers rail against.


2 Answers

Can inline CSS apply to child elements nested in the styled element?

Not directly.

Indirectly, only if the child element has that-property: inherit set in its existing stylesheet.

like image 90
Quentin Avatar answered Sep 21 '22 14:09

Quentin


I was interested in this question from a different context, specifically for styling html emails. Since css can't be added to the head of an email in gmail (believe it or not) the only way to consistently apply email styles is inline.

The answer to this question is no, there is no acceptable way to circumvent the problem in this or any other context that I'm aware of. When approaching a problem like this it is helpful to think about whether the style that you are trying to apply should be an "exception" or a "rule", i.e. if 90% of your tds are vertically-aligned top, you should just apply the style as a rule and go through and correct the 10%. When doing this it's important that you clearly specify your exceptions, preferably with a comment block that references the "rule".

For full reference on what css is supported and where this is very helpful: http://www.campaignmonitor.com/css/

like image 26
Cameron Drake Avatar answered Sep 21 '22 14:09

Cameron Drake