how to I address this particular nested element?

[Timo]

I'd be grateful for some help on this element addressing question. I want to
change the font-size of the "H" of "Hello World" in the following HTML using
first-letter, but cannot "reach" the element.

<div id="napoleon">
<div>
<a id="1000" class="dynamite " href="test.htm" >Hello World</a>
</div>
</div>

How do I address the contents of the anchor using a combination class
..dynamite and id #napoleon and the A and DIV selectors? This simple CSS has
no effect: .dynamite:first-letter{ font-size: medium}

Thanks
Timo

[Spartanicus]

Re: how to I address this particular nested element?

"Timo" <timo@anonymous .biz> wrote:
[color=blue]
>I'd be grateful for some help on this element addressing question. I want to
>change the font-size of the "H" of "Hello World" in the following HTML using
>first-letter, but cannot "reach" the element.
>
><div id="napoleon">
><div>
><a id="1000" class="dynamite " href="test.htm" >Hello World</a>
></div>
></div>
>
>How do I address the contents of the anchor using a combination class
>.dynamite and id #napoleon and the A and DIV selectors? This simple CSS has
>no effect: .dynamite:first-letter{ font-size: medium}[/color]

From the spec:

"The :first-letter pseudo-element applies to block, list-item,
table-cell, table-caption and inline-block elements."

--
Spartanicus

[Jukka K. Korpela]

Re: how to I address this particular nested element?

Spartanicus <me@privacy.net > wrote:
[color=blue]
> "Timo" <timo@anonymous .biz> wrote:
>[color=green]
>>I'd be grateful for some help on this element addressing question.
>>I want to change the font-size of the "H" of "Hello World" in the
>>following HTML using first-letter, but cannot "reach" the element.
>>
>><div id="napoleon"> <div>
>><a id="1000" class="dynamite " href="test.htm" >Hello World</a>
>></div> </div>
>>
>>How do I address the contents of the anchor using a combination
>>class .dynamite and id #napoleon and the A and DIV selectors? This
>>simple CSS has no effect: .dynamite:first-letter{ font-size:
>>medium}[/color]
>
> From the spec:
>
> "The :first-letter pseudo-element applies to block, list-item,
> table-cell, table-caption and inline-block elements."[/color]

Actually that's from the CSS 2.1 draft (status: Candidate
Recommendation) . Formally the current specification is CSS 2.0, which
obscurely says: "The :first-letter pseudo-element matches parts of
block-level elements only."

Anyway, it won't work for an <a> element by default. Here a simple
solution would be to use

#napoleon a { display: block; }
#napoleon a:first-letter { ... }

Alternatively, one could use the pseudo-element for the enclosing
block:

#napoleon div:first-letter { ... }

Using #napoleon:first-letter does not seem to work (on IE 6 or
Mozilla), perhaps due to the intervening <div> markup.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Spartanicus]

Re: how to I address this particular nested element?

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:
[color=blue][color=green]
>> From the spec:
>>
>> "The :first-letter pseudo-element applies to block, list-item,
>> table-cell, table-caption and inline-block elements."[/color]
>
>Actually that's from the CSS 2.1 draft (status: Candidate
>Recommendation ). Formally the current specification is CSS 2.0, which
>obscurely says: "The :first-letter pseudo-element matches parts of
>block-level elements only."[/color]

For the uninitiated: the 2.1 spec is the spec to use regardless of it's
official status.

--
Spartanicus

[Jukka K. Korpela]

Re: how to I address this particular nested element?

Spartanicus <me@privacy.net > wrote:
[color=blue]
> For the uninitiated: the 2.1 spec is the spec to use regardless of
> it's official status.[/color]

You mean the document that itself explicitly says "It is inappropriate
to cite this document as other than work in progress."?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Spartanicus]

Re: how to I address this particular nested element?

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:
[color=blue][color=green]
>> For the uninitiated: the 2.1 spec is the spec to use regardless of
>> it's official status.[/color]
>
>You mean the document that itself explicitly says "It is inappropriate
>to cite this document as other than work in progress."?[/color]

For the less well informed: Jukka is exercising his pedantic muscle and
should be ignored on this issue.

The CSS 2.0 spec is primarily of historical value, anyone using CSS
should use the 2.1 spec and ignore the above quote.

--
Spartanicus

[Richard]

Re: how to I address this particular nested element?

On Sat, 5 Mar 2005 13:33:15 -0500 Timo wrote:
[color=blue]
> I'd be grateful for some help on this element addressing question. I want
> to change the font-size of the "H" of "Hello World" in the following HTML
> using first-letter, but cannot "reach" the element.
>
> <div id="napoleon">
> <div>
> <a id="1000" class="dynamite " href="test.htm" >Hello World</a>
> </div>
> </div>
>
> How do I address the contents of the anchor using a combination class
> .dynamite and id #napoleon and the A and DIV selectors? This simple CSS
> has no effect: .dynamite:first-letter{ font-size: medium}
>
> Thanks
> Timo
>[/color]

<div>
<a id="1000" class="dynamite " href="#"><span style="font:20p t">H</span>ello
World</a>
</div>

As one possible way.

[Timo]

Re: how to I address this particular nested element?

Thanks, Richard, but I cannot alter the HTML. A program returns the anchor
nested in an unidentified DIV and I insert that HTML into the enclosing div
whose ID = napoleon. Rewriting that anchor-creation program is on the list
of to do items. It would be nice if it allowed me to assign a class to the
DIV that lacks one now.
Timo


"Richard" <Anonymous@127. 001> wrote in message
news:d0dk6a020g t@news2.newsguy .com...[color=blue]
> On Sat, 5 Mar 2005 13:33:15 -0500 Timo wrote:
>[color=green]
> > I'd be grateful for some help on this element addressing question. I[/color][/color]
want[color=blue][color=green]
> > to change the font-size of the "H" of "Hello World" in the following[/color][/color]
HTML[color=blue][color=green]
> > using first-letter, but cannot "reach" the element.
> >
> > <div id="napoleon">
> > <div>
> > <a id="1000" class="dynamite " href="test.htm" >Hello World</a>
> > </div>
> > </div>
> >
> > How do I address the contents of the anchor using a combination class
> > .dynamite and id #napoleon and the A and DIV selectors? This simple CSS
> > has no effect: .dynamite:first-letter{ font-size: medium}
> >
> > Thanks
> > Timo
> >[/color]
>
> <div>
> <a id="1000" class="dynamite " href="#"><span[/color]
style="font:20p t">H</span>ello[color=blue]
> World</a>
> </div>
>
> As one possible way.
>
>
>[/color]

[Martin!]

Re: how to I address this particular nested element?

Spartanicus wrote:[color=blue]
> "Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:
>
>[color=green][color=darkred]
>>>For the uninitiated: the 2.1 spec is the spec to use regardless of
>>>it's official status.[/color]
>>
>>You mean the document that itself explicitly says "It is inappropriate
>>to cite this document as other than work in progress."?[/color]
>
>
> For the less well informed: Jukka is exercising his pedantic muscle and
> should be ignored on this issue.
>
> The CSS 2.0 spec is primarily of historical value, anyone using CSS
> should use the 2.1 spec and ignore the above quote.
>[/color]

and for everybody that want there css to work: css 2.0 and 2.1 are both
ill-supported by all browsers.

if you want to use it, try your luck, take no good implementation for
granted.

[Timo]

Re: how to I address this particular nested element?

Very disappointing: I was waiting for the part where someone gets hit over
the head with a folding chair. :-)

Spartanicus, thanks for clarifying the spec, and Jukka, thanks for these
suggestions. When I tried them _in vivo_ there were some side-effects (other
A elements were affected, not merely those beneath #napolean) so I seized
the opportunity to rewrite the code that produced the anchor. The anonymous
DIV that enclosed the anchor now has a class reference, and it's much easier
to address the nested anchor.

Timo


"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote in message
news:Xns9610DFF C6A310jkorpelac stutfi@193.229. 0.31...[color=blue]
> Spartanicus <me@privacy.net > wrote:
>[color=green]
> > "Timo" <timo@anonymous .biz> wrote:
> >[color=darkred]
> >>I'd be grateful for some help on this element addressing question.
> >>I want to change the font-size of the "H" of "Hello World" in the
> >>following HTML using first-letter, but cannot "reach" the element.
> >>
> >><div id="napoleon"> <div>
> >><a id="1000" class="dynamite " href="test.htm" >Hello World</a>
> >></div> </div>
> >>
> >>How do I address the contents of the anchor using a combination
> >>class .dynamite and id #napoleon and the A and DIV selectors? This
> >>simple CSS has no effect: .dynamite:first-letter{ font-size:
> >>medium}[/color]
> >
> > From the spec:
> >
> > "The :first-letter pseudo-element applies to block, list-item,
> > table-cell, table-caption and inline-block elements."[/color]
>
> Actually that's from the CSS 2.1 draft (status: Candidate
> Recommendation) . Formally the current specification is CSS 2.0, which
> obscurely says: "The :first-letter pseudo-element matches parts of
> block-level elements only."
>
> Anyway, it won't work for an <a> element by default. Here a simple
> solution would be to use
>
> #napoleon a { display: block; }
> #napoleon a:first-letter { ... }
>
> Alternatively, one could use the pseudo-element for the enclosing
> block:
>
> #napoleon div:first-letter { ... }
>
> Using #napoleon:first-letter does not seem to work (on IE 6 or
> Mozilla), perhaps due to the intervening <div> markup.
>
> --
> Yucca, http://www.cs.tut.fi/~jkorpela/[/color]