I made a discovery, but should I use it?

[travger]

I found that an element can have more than one class.

Like, when all paragraphs are indented and I want to remove indent from first paragraph then it's enough to add "first" to the existing p class

<p class="calibre1 first">

and

.first {text-indent:0}

to the css.

Result looks the same if I copy the normal paragraph class, change text-indent to 0 (and it's name) and then change p class in every first paragraph to the new name.

Or if I want one p to be exactly like others, only little bit smaller. Why should I create new class with only one difference from previous?

But is it safe to use, can most/all readers cope with it? If yes, then why is it so seldom used? Or is there some other reason why I see (mostly) that every h or p has only one class; maybe it won't convert well?

[Turtle91]

I occasionally use multiple classes like this and have not had any problems....however, my testing has been a little limited. Marvin, epubreader, a little kindle and ade to name a couple.

I would recommend NOT using conflicting classes though - indent and non-indent - that seems to be asking for issues not to mention slightly bloating the code. I would use classes with different functionality.
For example:
.ctr {text-align:center}
.spacer {margin-top:2em; margin-bottom:2em}

<p class="ctr spacer">


Granted, both of those could be defined in a single class, but it is just an example of not having conflicting styling.

Cheers!

[Toxaris]

You can and 'should' use it. It would minimize the number of classes in a stylesheet. Remember that it is cascading. The second class you will use, will add to the first one. Or at least it should according to the specs. That also means, that if there are conflicting settings, the second one would be the one used.

Example:
.initial {text-indent: 0; font-weight: bold;}
.second {font-weight: normal;}

If you now would assign it to a tag, e.g.<p class="initial second">, the text would not have an indent and normal font-weight. Of course this is just an example...

I do recommend always to check the result, since the cascading factor can sometimes surprise you.

[travger]

Thank you for the responses.

I do check in Sigil. If I ever read that epub outside Calibre and find surprises, I can open it up again.

Bloating the code is good point, I'll keep it in mind.

Mostly I feel the urge just to add a class when the stylesheet is too long anyway or I want some specific paragraph to look little different.

[Toxaris]

Especially in the last case you describe is one of the use cases for me at least.

[HarryT]

Absolutely - that's exactly the way to do it. That's why they're called cascading style sheets, because each new style modifies the previous ones. If you have a "paragraph" style, which indents paragraphs, and you want a style for "initial paragraph" with no indent, simply specify the lack of indentation as a modification to the normal paragraph style; don't duplicate the entire style.

[pdurrant]

Originally Posted by HarryT

Absolutely - that's exactly the way to do it. That's why they're called cascading style sheets, because each new style modifies the previous ones. If you have a "paragraph" style, which indents paragraphs, and you want a style for "initial paragraph" with no indent, simply specify the lack of indentation as a modification to the normal paragraph style; don't duplicate the entire style.

This is slightly different from the use of two style sheets on the same element. The cascading bit means that an element inherits all applicable styles, with the specific overriding the generic.

So a paragraph <p class="first"> inherits any style set on body, any enclosing div or other block, the generic paragraph style definition and only then the class "first".

[exaltedwombat]

What about

h1 + p {text-indent:0;}

in the stylesheet?
Does this method of cancelling the indent of a first paragraph (i.e. one following a chapter heading using <h1>) cause problems in any standard reader?

[Toxaris]

None in the ones I know. I actually use that.

[Turtle91]

Originally Posted by exaltedwombat

What about

h1 + p {text-indent:0;}

in the stylesheet?
Does this method of cancelling the indent of a first paragraph (i.e. one following a chapter heading using <h1>) cause problems in any standard reader?

+1 Toxaris

I use it all the time. There are very few paragraphs that need a special class when you use techniques like this - that's a good thing!

I use multiple's like this:
p.ChDiv + p, blockquote + p, h2 + p, div.bannerlist + p, img + p, table + p {text-indent:0}

[Turtle91]

I also combine that with pseudo elements to style first paragraphs in the chapter.

h2 + p {text-indent:0; font-size:1em; line-height:1em}
h2 + p:first-letter {font-family:"Monotype Corsiva", "cursive"; font-size:3em; font-weight:bold; font-style:italic;float:left;margin-right:.1em; margin-bottom:.2em}
h2 + p:first-line {font-variant:small-caps; font-size:1.15em}

<h2>Chapter One</h2>
<p>This is first paragraph text.</p>

That gives a nice drop cap for the first letter and the first line (no matter what the width of the display) is in small caps.

I use that on my personal books because the reading app I use is mostly spec compliant...so it displays properly. Some non-compliant software, such as ADE, don't support pseudo elements, but they degrade gracefully. If you are making a commercial book then you would need to use workarounds to get the same effect.

Cheers,

[pdurrant]

It's annoying that ADE doesn't support pseudo elements, since it's part of the ePub 2.0 spec, re-confirmed in the 3.0 spec.

[JSWolf]

Originally Posted by pdurrant

This is slightly different from the use of two style sheets on the same element. The cascading bit means that an element inherits all applicable styles, with the specific overriding the generic.

So a paragraph <p class="first"> inherits any style set on body, any enclosing div or other block, the generic paragraph style definition and only then the class "first".

If goes body, p, first in that order.

I set p to what most p will be so I can get rid of things like <p class="para">. makes the code look that bit neater and the ePub smaller.

[travger]

I must remember that h+p trick. I actually knew it, but somehow never think about it when I should. Mostly I'm fixing something already formatted and it seems easier to slip in another class.

I'm afraid to use Replace All on those p class="calibre1" kind of paragraphs. Logic says that it should be safe, but I still can't feel sure there is not anything hidden. Maybe when I have few years of experience ... or like some book very-very much. Now it takes me whole day to check all the classes and figure out what they do.

[theducks]

Originally Posted by travger

I must remember that h+p trick. I actually knew it, but somehow never think about it when I should. Mostly I'm fixing something already formatted and it seems easier to slip in another class.

I'm afraid to use Replace All on those p class="calibre1" kind of paragraphs. Logic says that it should be safe, but I still can't feel sure there is not anything hidden. Maybe when I have few years of experience ... or like some book very-very much. Now it takes me whole day to check all the classes and figure out what they do.

Replace the whole tag (<p class="calibre1">) with <p> to be safe and avoid any other usage combinations.