On Tue, 24 Apr 2007, Dave M G wrote:
> I hadn't accurately described my code. My code actually looks like this:
>
> <div id="test">
> <span>I don't want this seen</span>
> <ul>
> <li><span>a list thing</span></li>
> </ul>
> </div>
>
> So the CSS seems to have been going from the initial <span> all the way
> through to the </span> in the last <li> tag. Knowing this, I can control
> the problem.
No, that's a completely wrong analysis. CSS does not operate on tags at
all. It works on a document tree.
Originally, you described your CSS code as follows:
#test span {
display: none
}
The selector #test span matches any span element that is inside (as a
subelement or subelement of subelement etc.) the element with id value
"test". Thus, it matches both of the span elements. The list is still
rendered, but its only list item has empty content as far as rendering is
concerned, so only the bullet and some spacing (due to margins or paddings
or both) appear (unless prevented by style sheets).
The simplest way to make the rule apply to a single element only is to use
a class attribute (say <span class="foo">) and a class selector:
.foo { display: none; }
There are ways to avoid classing, but they depend on the real context and
on the desired browser coverage. IE has poor support to advanced CSS
selectors up to IE 6, so anything like
#test > span { display: none; }
is probably not a practical solution, though it would be nice in principle
(matching only those span elements that are _directly_, as a subelement,
inside the element with id="test").
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
