Sam Partington wrote:
> > I have a page with mutiple <div class="article"> attributes. inside
> each one of them I have another <div> with a image on it so it's
> something like this
>
> <div class="article">
> <div class="article-image"><img src="..."></div>
> </div>
> <div class="article">
> <div class="article-image"><img src="..."></div>
> </div>
> <div class="article">
> <div class="article-image"><img src="..."></div>
> </div>
> >
> > *Note, this is not the complete markup, is just a simple testcase ...
>
> Is it possible to write a css that AUTOMATICALLY only shows the image
> > on the first div ?
I just realised there was a typo in my last message. The CSS selector
should have read
div.article div.article-image img
{
display: none; /* or however you want to do the hiding */
}
div.article:first-child div.article-image img
{
display: inline; /* or however you want to do the showing */
}
note the : after article in the second selector
I'm not sure that your :first-child selector will work in the way you
intend in an arbitrary layout. The selector div.article:first-child
will select a div of class article which *is itself* the first child
of some other element (in this case, any other element). So if the
line of divs are in their own container with nothing else in front of
them, this method will work. But if there is any sibling-level
element in front of them, it won't. Also, since IE understands the
first selector but not the second, that browser will hide everything.
A better method might be to use something like this:
div.article img { display: inline; /*or no selector at all for this*/ }
div.article+div.article img {display: none; }
This will hide the images after the first, but only in browsers that
understand the adjacent sibling selector. In browsers that don't get
it, all the images will display. The caveat is that you cannot have
any sibling-level elements in between the classed divs (arbitrary
text nodes would be OK, but not actual elements). We don't know the
full layout, so this method may or may not be suitable for Grillo's
needs.
Having said all that, I agree with Sam that the best method (and
probably the only cross-browser method) involves scripting.
--
-Adam Kuehn
Biomedical Programs Accounting
406 Nanaline Duke
Box 3567, DUMC
Durham, NC 27710
919-681-8825 (voice)
919-684-8346 (fax)
[EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
