944,149 Members | Top Members by Rank

Ad:
Aug 1st, 2006
0

CSS Help

Expand Post »
I have two css classes. ".test1 and .test2"
Can anyone explain what this code is doing?

HTML and CSS Syntax (Toggle Plain Text)
  1. .test1{height: 100%; clear: both; border: 1px solid #999;}
  2. .test1, .test1 .test2{height: 100% !important; height: 30em; min-height: 30em; }
I'm thinking that all the styles in .test1 are applied to the element with this classname.
For the second style ".test1, .test1 .test2"
I think this will only be applied when an element with the classname .test2 is inside and element with a classname of .test1. When this happens then the height style from .test1 will be overridden with the style from .test2.

Is this the correct behavior?

Thanks, sj
Similar Threads
Reputation Points: 13
Solved Threads: 2
Junior Poster in Training
Sailor_Jerry is offline Offline
88 posts
since Aug 2005
Aug 1st, 2006
0

Re: CSS Help

Ive never seen it with classes like that usually what people would do is use ids for that so like
HTML and CSS Syntax (Toggle Plain Text)
  1. #test {
  2. /*global stlyes for the elements*/
  3. }
  4.  
  5. #test .test1 {
  6. /*styles for anything in the test id with a class name of test1*/
  7. }
  8.  
  9. #test .test1 .test2 {
  10. /*styles for anything inside the test id and class test1 with a class of test2 */
  11. }

now ive never seen anyone do this with all classes ive only seen it used with p, a, ul, li, and other html elements. It is an easy way to transfer styles inside of a single id w/o having to write sperate classes or ids for each one.
Reputation Points: 33
Solved Threads: 19
Nearly a Posting Virtuoso
mikeandike22 is offline Offline
1,496 posts
since May 2004
Aug 1st, 2006
0

Re: CSS Help

What you have are two rules. The first rule applies to every element with the class of test1. The second rule applies to every element with the class of test1, as well. In addition, the second rule applies to any element of class test2 which is a descendant (child, child of a child, etc.) element of an element of class test1.

So, you have style declarations for class test1 split among two rules. You also have two height declarations in the second rule... which is strange. It also isn't clear which height declaration will "win", because one of them is flagged as "!important".

All-in-all, a very strange pair of rules.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Aug 1st, 2006
0

Re: CSS Help

Thanks for the info!!

Since !important is ignored by IE, the height declarations in the second style is just a hack to get firefox to behave.
Essentially firefox will ignore the second height, and IE will igonore the first height.
Reputation Points: 13
Solved Threads: 2
Junior Poster in Training
Sailor_Jerry is offline Offline
88 posts
since Aug 2005
Aug 1st, 2006
1

Re: CSS Help

Ok... so I guess the essential nugget of information you were after is the "descendant selector" syntax. Note that it selects all descendants, not just child elements, but also their child elements, and so on. You should also understand exactly what a "child" element is, vs. for example an "adjacent sibling" element.

If you only want to select direct child elements, you'd use:

.test1, .test1 > .test2 {}

Here is the reference on Child Selectors.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Aug 5th, 2006
1

Re: CSS Help

I find using IE conditional comments better in the long run for css code to work in all browsers rather than css hacks. So I would look into that.
Reputation Points: 33
Solved Threads: 19
Nearly a Posting Virtuoso
mikeandike22 is offline Offline
1,496 posts
since May 2004
Aug 24th, 2006
0

Re: CSS Help

I want to match my own class selector and then modify the body.

HTML and CSS Syntax (Toggle Plain Text)
  1. //This does not work but to give you idea of what i am trying to do.
  2. .selector body {overflow:-moz-scrollbars-none;}

Do I have to use javascript to update the body style? I only want this style to be honored if a certain class is present in the body.
Reputation Points: 13
Solved Threads: 2
Junior Poster in Training
Sailor_Jerry is offline Offline
88 posts
since Aug 2005
Aug 24th, 2006
0

Re: CSS Help

I want to match my own class selector and then modify the body.

HTML and CSS Syntax (Toggle Plain Text)
  1. //This does not work but to give you idea of what i am trying to do.
  2. .selector body {overflow:-moz-scrollbars-none;}

Do I have to use javascript to update the body style? I only want this style to be honored if a certain class is present in the body.

Wouldn'y you just use
HTML and CSS Syntax (Toggle Plain Text)
  1. .selector {overflow:-moz-scrollbars-none;}

or

HTML and CSS Syntax (Toggle Plain Text)
  1. body.selector {overflow:-moz-scrollbars-none;}

and then

[html] <body class="selector">[/html]

or am I misunderstanding the question?
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Aug 24th, 2006
0

Re: CSS Help

Click to Expand / Collapse  Quote originally posted by Deacon J ...
Wouldn'y you just use
HTML and CSS Syntax (Toggle Plain Text)
  1. .selector {overflow:-moz-scrollbars-none;}

or

HTML and CSS Syntax (Toggle Plain Text)
  1. body.selector {overflow:-moz-scrollbars-none;}

and then

[html] <body class="selector">[/html]

or am I misunderstanding the question?
Basically I wanted to do the reverse of body.selector{overflow:-moz-scrollbars-none;}.

So If .selector is on the page, apply this style to the body.

I don’t think you can do it, since you would be traveling up the DOM. I think it only cascades down.
Reputation Points: 13
Solved Threads: 2
Junior Poster in Training
Sailor_Jerry is offline Offline
88 posts
since Aug 2005
Aug 25th, 2006
0

Re: CSS Help

You'd have to use javascript to do that.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: CSS, Netscape 4, @media screen, display none
Next Thread in HTML and CSS Forum Timeline: Random Background image





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC