|
|
 |
|
|
Pages: 1
Nesting in CSS
(Click here to view the original thread with full colors/images)
Posted by: VmanBeBop
Hey guys, I've been playing around with CSS so I could implement it into my site. I've pretty much got it down. However, something I'm seeing that doesn't seem to be explained anywhere is when the selector has multiple items that aren't seperated by commas, as so:
Code:
table table td div img {visibility:hidden;}
Does this indicate how particular items nested in a certain way would behave? For example, would the above style sheet have the following effect?
Code:
<table>
<table>
<tr>
<td>
<div><img src=hooplah.jpg></div> //this image is hidden
</td>
</tr>
<tr>
<td>
<img src=halpooh.jpg> //whereas this one is not
</td>
</tr>
</table
</table>
Posted by: VmanBeBop
This is definately not a bump...
Posted by: DemonBob
The better way to do this would be something along these lines, if i remember corretly: Don't quote me on this.
div#somename_visable{
// CSS for HIDE
}
div#somename_hidden {
// CSS for visable
}
Code:
<table>
<table>
<tr>
<td>
<div id="somename_hidden"><img src=hooplah.jpg></div> //this image is hidden
</td>
</tr>
<tr>
<td>
<div id="somename_visable"><img src=halpooh.jpg></div> //whereas this one is not
</td>
</tr>
</table
</table>
Basically it's asinging uniqe itdentifiers to the to div tags, that why your CSS is cleaner and you can reuse the code for other div tags. Hope this point you in the right direction. If you need more explaination, let me know. I'll have to take a few minutes to brush up and figure out the exact code.
Posted by: VmanBeBop
I'm not sure if what you said works, but i think you may talking about classes where you would do:
Code:
div.hide{visibility:hidden;}
where 'hide' is a class of div. Then in every div statement that you wanted to hide stuff, you would set the class variable to the one you wanted to use. As so:
Code:
<div class="hide"></div>
As yet, I would still like to know if the code syntax I explained in my first post is what I think it does (nested tags in CSS).
|
|
|
|
|
