CSS help/advice: combining pseudo-elements {SOLVED}

Mr_Rose

First, I guess I need to know if what I want to do is even possible; essentially, combine two CSS pseudo-elements to select the intersection between them for specific styling.
As a quick and dirty example, say I want to create something equivalent to a drop-cap, but only on the very first paragraph of a chapter, by combining the first-child and first-letter elements.
Is this even possible?

Second, if it is, how? What magical voodoo do I need to insert between p:first-child and :first letter to make them talk to each other?

Ideally, this would be done without having to go through every page and add an <a> tag or something around the relevant bits of text and it is entirely possible that the pagination will change later.

ransim

Mr_Rose wrote: »

First, I guess I need to know if what I want to do is even possible; essentially, combine two CSS pseudo-elements to select the intersection between them for specific styling.
As a quick and dirty example, say I want to create something equivalent to a drop-cap, but only on the very first paragraph of a chapter, by combining the first-child and first-letter elements.
Is this even possible?

Second, if it is, how? What magical voodoo do I need to insert between p:first-child and :first letter to make them talk to each other?

Ideally, this would be done without having to go through every page and add an <a> tag or something around the relevant bits of text and it is entirely possible that the pagination will change later.

Combining... you know I think this may be possible if you did something like:

<div id="article">
      <p>text</p>
      <p>text 2</p>
</div>

Theoretically you should be able to specify:

div#article p:first-child:first-letter {
      color:#ff0000;
      font-size:xx-large;
}

Actually I tested it, that does work. At least in Chrome.

Mr_Rose

Perfect! Thanks!
My first line is now all small-caps except for the first letter which is serif, twice the size and dropped.
Works great in Chrome and Firefox 3.6

I was trying all sorts of weird combining symbols and stuff between the pseudo-element tags but somehow never though to just stick them together. :oops:

ransim

Mr_Rose wrote: »

Perfect! Thanks!
My first line is now all small-caps except for the first letter which is serif, twice the size and dropped.
Works great in Chrome and Firefox 3.6

I was trying all sorts of weird combining symbols and stuff between the pseudo-element tags but somehow never though to just stick them together. :oops:

I wouldn't sweat it, I consider myself fairly savvy with CSS and there are things even I still come across that I didn't know I could do. But in most cases you can chain things like that in CSS just don't include a space unless you're going to reference a second item.