Apply CSS Style to child elements

Question

I want to apply styles only to the table inside the DIV with a particular class   Note  I d rather use a css-selector for children elements   Why does the  1 works and  2 doesn t   1   div test th  div test td  div test caption  padding 40px 100px 40px 50px     2   div test th  td  caption  padding 40px 100px 40px 50px     HTML      lt html gt       lt head gt           lt style gt              div test  gt  th  td  caption  padding 40px 100px 40px 50px            lt  style gt       lt  head gt       lt body gt           lt div gt               lt table border  2  gt                   lt tr gt  lt td gt some lt  td gt  lt  tr gt                   lt tr gt  lt td gt data lt  td gt  lt  tr gt                   lt tr gt  lt td gt here lt  td gt  lt  tr gt               lt  table gt           lt  div gt           lt div class  test  gt               lt table  border  2  gt                   lt tr gt  lt td gt some lt  td gt  lt  tr gt                   lt tr gt  lt td gt data lt  td gt  lt  tr gt                   lt tr gt  lt td gt here lt  td gt  lt  tr gt               lt  table gt           lt  div gt       lt  body gt   lt  html gt    What am I doing wrong

User · Answer

As far as I know this   div class yourclass  table    your style here       or in your case even this   div yourclass table   your style here       but this will work for elements with yourclass that might not be divs  will affect only tables inside yourclass  And  as Ken says  the   is not supported everywhere  and div class yourclass  too  so use the point notation for classes

User · Answer

test    padding  40px 100px 40px 50px

User · Answer

If you want to add style in all child and no specification for html tag then use it   Parent tag div parent  child tag inside the div parent like  lt a gt    lt input gt    lt label gt  etc   code   div parent    color   045123 important    You can also remove important  its not required

User · Answer

div test td  div test caption  div test th    works for me   The child selector   does not work in IE6

User · Answer

The  gt  selector matches direct children only  not descendants   You want   div test th  td  caption      or more likely  div test th  div test td  div test caption      Edit   The first one says     div test th     any  lt th gt  underneath a  lt div class  test  gt       td              or any  lt td gt  anywhere at all      caption         or any  lt caption gt       Whereas the second says    div test th         any  lt th gt  underneath a  lt div class  test  gt       div test td         or any  lt td gt  underneath a  lt div class  test  gt       div test caption    or any  lt caption gt  underneath a  lt div class  test  gt        In your original the div test  gt  th says any  lt th gt  which is a   direct   child of  lt div class  test  gt   which means it will match  lt div class  test  gt  lt th gt this lt  th gt  lt  div gt  but won t match  lt div class  test  gt  lt table gt  lt th gt this lt  th gt  lt  table gt  lt  div gt

User · Answer

This code  div test th  td  caption  padding 40px 100px 40px 50px    applies a rule to all th elements which are contained by a div element with a class named test  in addition to all td elements and all caption elements   It is not the same as  all td  th and caption elements which are contained by a div element with a class of test    To accomplish that you need to change your selectors     gt   isn t fully supported by some older browsers  I m looking at you  Internet Explorer      div test th  div test td  div test caption       padding  40px 100px 40px 50px

User · Answer

This code can do the trick as well  using the SCSS syntax   parent      amp   gt          margin-right  15px       amp  last-child         margin-right  0

User · Answer

Here is some code that I recently wrote   I think that it provides a basic explanation of combining class ID names with pseudoclasses    x000D   x000D   content   x000D    width  800px  x000D    border  1px solid black  x000D    border-radius  10px  x000D    box-shadow  0 0 5px 2px grey  x000D    margin  30px auto 20px auto  x000D      height 200px    x000D   x000D    x000D  p red   x000D    color  red  x000D    x000D  p blue   x000D    color  blue  x000D    x000D  p orange   x000D    color  orange  x000D    x000D  p green   x000D    color  green  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Class practice lt  title gt  x000D     lt link href  wrench favicon ico  rel  icon  type  image x-icon    gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  content  gt  x000D       lt p id  orange  gt orange lt  p gt  x000D       lt p id  green  gt green lt  p gt  x000D       lt p class  red  gt red lt  p gt  x000D       lt p class  blue  gt blue lt  p gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

[css] Apply CSS Style to child elements

Examples related to css

Examples related to css-selectors