How do I apply a style to all children of an element

Question

I have an element with class  myTestClass   How do I apply a css style to all children of this elements  I only want to apply the style to the elements children  Not its grand children   I could use   myTestClass  gt  div     margin  0 20px      which work for all div children  but I would like a solution which works for all children  I thought I could use    but   myTestClass  gt        margin  0 20px       does not work    Edit  The  myTestClass  gt    selector does not apply the rule in firefox 26  and there is no other rule for margin according to firebug  And it works if I replace   with div

User · Answer

Instead of the   selector you can use the  not selector  with the  gt  selector and set something that definitely wont be a child    Edit  I thought it would be faster but it turns out I was wrong  Disregard   Example    container  gt   not marquee           color red           lt div class  container  gt       lt p gt  lt  p gt       lt span gt  lt  span gt   lt div gt

User · Answer

As commented by David Thomas  descendants of those child elements will  likely  inherit most of the styles assigned to those child elements   You need to wrap your  myTestClass inside an element and apply the styles to descendants by adding  wrapper   descendant selector  Then  add  myTestClass  gt    child selector to apply the style to the elements children  not its grand children  For example like this   JSFiddle - DEMO   x000D   x000D   wrapper     x000D      color  blue  x000D      margin  0 100px     Only for demo    x000D    x000D   myTestClass  gt      x000D      color red  x000D      margin  0 20px  x000D    x000D   lt div class  wrapper  gt  x000D       lt div class  myTestClass  gt Text 0 x000D           lt div gt Text 1 lt  div gt  x000D           lt span gt Text 1 lt  span gt  x000D           lt div gt Text 1 x000D               lt p gt Text 2 lt  p gt  x000D               lt div gt Text 2 lt  div gt  x000D           lt  div gt  x000D           lt p gt Text 1 lt  p gt  x000D       lt  div gt  x000D       lt div gt Text 0 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] How do I apply a style to all children of an element

Examples related to css

Examples related to css-selectors