Member Avatar for Sailor_Jerry

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

.test1{height: 100%; clear: both; border: 1px solid #999;}
.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

  • 4 Contributors
  • 9 Replies
  • 143 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by FC Jamison

Recommended Answers

All 9 Replies

Member Avatar for mikeandike22

Ive never seen it with classes like that usually what people would do is use ids for that so like

#test {
/*global stlyes for the elements*/
}

#test .test1 {
/*styles for anything in the test id with a class name of test1*/
}

#test .test1 .test2 {
/*styles for anything inside the test id and class test1 with a class of test2 */
}

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.

Member Avatar for tgreer

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.

Member Avatar for Sailor_Jerry

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.

Member Avatar for tgreer

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.

Member Avatar for mikeandike22

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.

Member Avatar for Sailor_Jerry

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

//This does not work but to give you idea of what i am trying to do. 
.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.

Member Avatar for FC Jamison

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

//This does not work but to give you idea of what i am trying to do. 
.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

.selector {overflow:-moz-scrollbars-none;}

or

body.selector {overflow:-moz-scrollbars-none;}

and then

<body class="selector">

or am I misunderstanding the question?

Member Avatar for Sailor_Jerry

Wouldn'y you just use

.selector {overflow:-moz-scrollbars-none;}

or

body.selector {overflow:-moz-scrollbars-none;}

and then

<body class="selector">

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.

Member Avatar for FC Jamison

You'd have to use javascript to do that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.