•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,488 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,404 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1268 | Replies: 9
 |
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation: 
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
I have two css classes. ".test1 and .test2"
Can anyone explain what this code is doing?
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
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; }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
•
•
Join Date: May 2004
Location: Boston,MA
Posts: 1,362
Reputation:
Rep Power: 7
Solved Threads: 17
Ive never seen it with classes like that usually what people would do is use ids for that so like
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.
#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.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 35
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.
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.
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
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.
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.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 35
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:
Here is the reference on Child Selectors.
If you only want to select direct child elements, you'd use:
.test1, .test1 > .test2 {}Here is the reference on Child Selectors.
•
•
Join Date: May 2004
Location: Boston,MA
Posts: 1,362
Reputation:
Rep Power: 7
Solved Threads: 17
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.
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
I want to match my own class selector and then modify the body.
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.
//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.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 429
Reputation:
Rep Power: 5
Solved Threads: 18
Posting Pro in Training
•
•
•
•
Originally Posted by 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.
Wouldn'y you just use
.selector {overflow:-moz-scrollbars-none;}or
body.selector {overflow:-moz-scrollbars-none;}and then
[html] <body class="selector">[/html]
or am I misunderstanding the question?
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
•
•
•
•
Originally Posted by Deacon J
Wouldn'y you just use
.selector {overflow:-moz-scrollbars-none;}
or
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.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Layout Tables to CSS (HTML and CSS)
- Layout in CSS (HTML and CSS)
- CSS center vertical (HTML and CSS)
- CSS Quicky (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS, Netscape 4, @media screen, display none
- Next Thread: Random Background image
