Div Selectors vs Paragraph Classes -- Robustness?

[GrannyGrump]

I am trying this out ----
I'm using selectors in <div>s to format paragraphs, so that I don't have to use many styles for lots of paragraphs. This can keep all the styling in the div, and feels much simpler. I am only using this method for short segments.
For example, for some poetry that has altenating lines with deeper margins/indents:

CSS:
p { /*format for standard paragraph*/
margin: .25em 0;
text-indent: 1.5em;
}

div.stanza  {
margin: 1.5em 10%;
font-size: 90%;
}
div.stanza p {
text-align: left;
text-indent: -2em; 
}
div.stanza p,
div.stanza p+p+p,
div.stanza p+p+p+p+p,
div.stanza p+p+p+p+p+p+p {
margin-left: 2em;
}
div.stanza p+p,
div.stanza p+p+p+p,
div.stanza p+p+p+p+p+p,
div.stanza p+p+p+p+p+p+p+p {
margin-left: 4em; 
}

HTML:
<div class="stanza">
<p>And from our deck sad eyes looked out</p>
<p>Across the stormy scene:</p>
<p>The tossing wake of billows aft,</p>
<p>The bending forests green,</p>
<p>The chickens sheltered under carts</p>
<p>In lee of barn the cows,</p>
<p>The skurrying swine with straw in mouth,</p>
<p>The wild spray from our bows!</p>
</div>

Will this work in other situations, or did I just get lucky?
Is this as "robust" as using different classes for each type of paragraph?
Is it as widely compatible on different readers and apps?

Or, does it not matter which method I use?

[mzmm]

nice—i've never thought of using multiple adjacent sibling selectors like that.

i realize this doesn't really answer your question, but i've used simple h2 + p type adjacent sibling selectors quite a bit, and can't think of an epub reader that doesn't properly display them. it is valid CSS 2/2.1 (for what that's worth).

here's a test book in case the nice people on mobileread want to help you crowdsource some tests:

[PoP]

This nᵗʰ sibling idea is clever, simple and elegant. Kind of a new CSS pseudo selector.

[Toxaris]

But does it work on the readers?

[theducks]

Echo

Does it work on notoriously stubborn, commonly used devices/reading programs

AND
how bad will it be after conversion with converters like Calibre ?

Doing this is a great academic exercise, but I can see repercussions if it falls blindly into use.

[DiapDealer]

To be honest: I don't think "calibre might have difficulty converting it" is a very compelling reason to NOT do something. I mean caveat convertor has always been the case, no?

[GrannyGrump]

Thanks to all for responding!

Well...
I didn't know this CSS was unusual! I figured I just stumbled on something that everybody else (but me) knew about.

I guess it might be best to use caution for the time being, and reserve this method for books for my personal use.

I think I might post a poll requesting folks to test on different readers and apps, maybe it will turn out to be useful code.

[Doitsu]

@grannyGrumpy:

FYI, if you designed ePubs exclusively for iPads, current Kindle models, some Kobo devices and other Webkit based devices and apps, you could simply use nth-child pseudo-elements:

p {
margin: .25em 0;
text-indent: 1.5em;
}

div.stanza  {
margin: 1.5em 10%;
font-size: 90%;
}

div.stanza p:nth-child(odd) {
margin-left: 2em;
}

div.stanza p:nth-child(even) {
margin-left: 4em;
}

Unfortunately, it'll probably take a while until all major ebook reader manufacturers introduce CSS3 compliant readers.

[GrannyGrump]

@Doitsu: That sounds so simple and lovely. I wonder if ePub3 will be widely supported anytime within this decade!

Since I only upload public domain books for free download, I guess I will continue to use the old tried & true CSS. sigh...

[mzmm]

i tried this out on ADE and the sony desktop reader as well as PRST1 and it works across the board there. iBooks has no problem, as well as another 7 or so reader apps on the iPad. the iOS reader app i've come across so far that doesn't register the + + + + is Kobo app for ios.

i'd be interested to know if it's supported on the actual Kobo, though

[AlexBell]

Originally Posted by mzmm

i tried this out on ADE and the sony desktop reader as well as PRST1 and it works across the board there. iBooks has no problem, as well as another 7 or so reader apps on the iPad. the iOS reader app i've come across so far that doesn't register the + + + + is Kobo app for ios.

i'd be interested to know if it's supported on the actual Kobo, though

No sooner seen than done.

I have it open on my Kobo Touch right now. The three sizes of text are visible, at increasing sizes, but the lines of text in each of the 3em and 4em levels run together - the top of the 4 in 4em reaches almost as high as the cross bar in the e in 'here's.'

Perhaps increasing the line-height might help?

[Hitch]

Originally Posted by Doitsu

@grannyGrumpy:

FYI, if you designed ePubs exclusively for iPads, current Kindle models, some Kobo devices and other Webkit based devices and apps, you could simply use nth-child pseudo-elements:

p {
margin: .25em 0;
text-indent: 1.5em;
}

div.stanza  {
margin: 1.5em 10%;
font-size: 90%;
}

div.stanza p:nth-child(odd) {
margin-left: 2em;
}

div.stanza p:nth-child(even) {
margin-left: 4em;
}

Unfortunately, it'll probably take a while until all major ebook reader manufacturers introduce CSS3 compliant readers.

Doitsu:

Are you having success with this on K4iOS? Our tests for adjacents (i.e., H3+p) on K4iOS have not been promising.

Hitch

[Doitsu]

Originally Posted by Hitch

Are you having success with this on K4iOS?

Nope. That's why I specifically mentioned ePubs in my reply. However it does work with KF8 enabled devices and apps and many other Webkit based readers.

[Hitch]

Originally Posted by Doitsu

Nope. That's why I specifically mentioned ePubs in my reply. However it does work with KF8 enabled devices and apps and many other Webkit based readers.

Doitsu:

I did read your reply, and you did indeed specifically say ePUBs and KF8, but of course, Amazon keeps swearing that iOS is "gunna be" KF8 any second, which is why I asked--plus, there's no reason for me to think that everything we do is magically always right. (I wish). You might have had something up your sleeve! ;-)

{sigh}. I'd love to use the selectors. But freaking K4iOS.... just making sure it wasn't us.

Hitch

[SBT]

For some time I've used the +++siblings for front pages, where font size and formatting varies from line to line. I've also found it handy on several other occasions.
I've been sorely tempted to drop the <p> tag altogether, and just use formatted <div>'s for paragraphs instead. It's so often I want to include some kind of block-style element inside a paragraph, only to yet again experience the epub/html validator sending me dirty looks...