Re: [css-d] conditional images
Sam Partington wrote:
> > I have a page with mutiple attributes. inside
> each one of them I have another with a image on it so it's
> something like this
>
>
>
>
>
>
>
>
>
>
> >
> > *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/
Re: [css-d] conditional images
Doh,
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
Sam
On 10/5/05, Sam Partington <[EMAIL PROTECTED]> wrote:
> This should do the trick :
>
> 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 */
> }
>
> But guess what? :first-child is not not supported in IE. I'd usually
> fix this by using a class called article_first_child, and adding that
> to the class list using server scripting :
>
>
>
>
>
>
>
>
> HTH
>
> Sam
>
>
> On 10/4/05, Marcelo Wolfgang <[EMAIL PROTECTED]> wrote:
> > Hi,
> >
> > I have a page with mutiple attributes. inside
> > each one of them I have another with a image on it so it's
> > something like this
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> > *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 ?
> > Does not need to work on IE, only Firefox, but if it works on ie, better
> > yet.
> >
> > TIA
> > Grillo
> > __
> > 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/
> >
>
__
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/
Re: [css-d] conditional images
This should do the trick :
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 */
}
But guess what? :first-child is not not supported in IE. I'd usually
fix this by using a class called article_first_child, and adding that
to the class list using server scripting :
HTH
Sam
On 10/4/05, Marcelo Wolfgang <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I have a page with mutiple attributes. inside
> each one of them I have another with a image on it so it's
> something like this
>
>
>
>
>
>
>
>
>
>
>
> *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 ?
> Does not need to work on IE, only Firefox, but if it works on ie, better yet.
>
> TIA
> Grillo
> __
> 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/
>
__
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/
[css-d] conditional images
Hi, I have a page with mutiple attributes. inside each one of them I have another with a image on it so it's something like this *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 ? Does not need to work on IE, only Firefox, but if it works on ie, better yet. TIA Grillo __ 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/
