CSS Classes SubClasses

Question

Is it possible  other than what I m doing because it doesn t seem to work  to do this  I want to be able to have subclasses that are under a class to use the CSS specifically for that class subclass   CSS   area1       border 1px solid black     area1 item       color red     area2       border 1px solid blue     area2 item       color blue      HTML   lt div class  area1  gt       lt table gt           lt tr gt               lt td class  item  gt Text Text Text lt  td gt               lt td class  item  gt Text Text Text lt  td gt           lt  tr gt       lt  table gt   lt  div gt   lt div class  area2  gt        lt table gt           lt tr gt               lt td class  item  gt Text Text Text lt  td gt               lt td class  item  gt Text Text Text lt  td gt           lt  tr gt       lt  table gt   lt  div gt    So that I can just use class  item  for the elements under the parent css class  area1   area2   I know I can use class  area1 item  to get this to work  but I don t understand why it has to be so verbose about it  Shouldn t the css subclass look at what parent class it is under in order to define it   Note  this works in IE  using 7 right now   but in FF it does not  so I m assuming this isn t a CSS standard way of doing something

User · Answer

That is the backbone of CSS  the  cascade  in Cascading Style Sheets   If you write your CSS rules in a single line it makes it easier to see the structure    area1  item   color red     area2  item   color blue     area2  item span   font-weight bold      Using multiple classes is also a good intermediate advanced use of CSS  unfortunately there is a well known IE6 bug which limits this usage when writing cross browser code    lt div class  area1 larger  gt        lt  div gt    area1   width 200px     area1 larger   width 300px      IE6 IGNORES the first selector in a multi-class rule  so IE6 actually applies the  area1 larger rule as     area1   larger           Meaning it will affect ALL  larger elements   It s a very nasty and unfortunate bug  one of many  in IE6 that forces you to pretty much never use that feature of CSS if you want one clean cross-browser CSS file   The solution then is to use CSS classname prefixes to avoid colliding wiht generic classnames    area1          area1 area1Larger           area2 area2Larger           May as well use just one class  but that way you can keep the CSS in the logic you intended  while knowing that  area1Larger only affects  area1  etc

User · Answer

Just put a space between  area1 and  item  e g    area1  item       color red      this style applies to elements with class item inside an element with class area1

User · Answer

do you want to force only children to be selected   http   css maxdesign com au selectutorial selectors child htm   area1           border 1px solid black     area1 gt  item       color red     area2       border 1px solid blue     area2 gt  item       color blue

User · Answer

Your problem seems to be a missing space between your two classes in the CSS    area1 item       color red      Should be   area1  item       color red

User · Answer

Just need to add a space    area2  item

User · Answer

you can also have two classes within an element like this   lt div class    item1 item2 item3  gt  lt  div gt   each item in the class is its own class   item1     background-color black      item2     background-color green      item3     background-color orange

User · Answer

FYI  when you define a rule like you did above  with two selectors chained together    area1 item       color red      It means      Apply this style to any element that has both the class  area1  and  item     Such as    lt div class  area1 item  gt    Sadly it doesn t work in IE6  but that s what it means

User · Answer

Just put a space between your classes   area1  item               Here s a very good reference for CSS Selectors

User · Answer

Following on from kR105 s reply above   My problem was similar to that of the OP  Original Poster   only occurred outside a table  so the subclasses were not called from within the scope of the parent class  the table   but outside of it  so I had to ADD selectors  as kR105 mentioned   Here was the problem  I had two boxes  divs   each with the same border-radius  HTML5   padding and margin  but needed to make them different colors  Rather than repeat those 3 parameters for each color class  I wanted a  superclass  to contain border-radius padding margin  then just individual  subclasses  to express their differences  double quotes around each as they re not really subclasses - see my later post   Here s how it worked out   HTML    lt body gt     lt div class  box box1  gt  Hello my color is RED  lt  div gt     lt div class  box box2  gt  Hello my color is BLUE  lt  div gt   lt  body gt    CSS   div box  border-radius 20px 20px 20px 20px  padding 10px  margin 10px  div box1  border 3px solid red  color red  div box2  border 3px solid blue  color blue    Hope someone finds this helpful

User · Answer

The class you apply on the div can be used to as a reference point to style elements with that div  for example    lt div class  area1  gt       lt table gt           lt tr gt                   lt td class  item  gt Text Text Text lt  td gt                   lt td class  item  gt Text Text Text lt  td gt           lt  tr gt       lt  table gt   lt  div gt     area1   border 1px solid black      area1 td   color red       This will effect any TD within  area1      To be super semantic you should move the class onto the table        lt table class  area1  gt           lt tr gt                   lt td gt Text Text Text lt  td gt                   lt td gt Text Text Text lt  td gt           lt  tr gt       lt  table gt

User · Answer

kR105 wrote      you can also have two classes within an element like this    lt div class    item1 item2 item3  gt  lt  div      I can t see the value of this  since by the principle of cascading styles  the last one takes precedence  For example  if in my earlier example I changed the HTML to read     lt div class  box1 box2  gt  Hello what is my color   lt  div gt    the box s border and text would be blue  since  box2 s style assigns these values   Also in my earlier post I should have emphasized that adding selectors as I did is not the same as creating a subclass within a class  the first solution in this thread   though the effect is similar

[css] CSS Classes & SubClasses

Examples related to css