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]

"Timo" <ti**@anonymous.biz> wrote:

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}

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]

Spartanicus <[e-mail]> wrote:

"Timo" <ti**@anonymous.biz> wrote:

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}

From the spec:

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

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]

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote:

From the spec:

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

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."

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

--
Spartanicus

[Jukka K. Korpela]

Spartanicus <[e-mail]> wrote:

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

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]

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote:

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

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

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]

On Sat, 5 Mar 2005 13:33:15 -0500 Timo wrote:

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

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

As one possible way.

[Timo]

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" <An*******@127.001> wrote in message
news:d0*********@news2.newsguy.com...

On Sat, 5 Mar 2005 13:33:15 -0500 Timo wrote:

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

<div>
<a id="1000" class="dynamite" href="#"><span

style="font:20pt">H</span>ello World</a>
</div>

As one possible way.

[Martin!]

Spartanicus wrote:

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote:

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

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

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.

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]

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" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..

Spartanicus <[e-mail]> wrote:

"Timo" <ti**@anonymous.biz> wrote:

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}

From the spec:

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

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/