Am I Misunderstanding Nesting Selectors?

[enuddleyarbl]

EDIT: OK. It looks like I don't need the actual & since I want the rule to apply to all descendents. If I pull it out, everyone's happy.
OP: I've got some CSS classes that are formatted as italic. If there's emphasized or italicized text inside those classes in a book, there's no visible difference from the rest of the text. After getting tired of trying to wrap such text with font-style: normal spans, I decided to try a nesting selector (&) in those classes to automatically apply the normal font-style when it runs into <i> and <em>. Here's an example:

div.chapquote {
	/* Chapter Quote (quote at top of chapters) Styling */
	display: block;
	font-style:	italic;
	margin-left:	1.5em;
	margin-right:	1.5em;
	padding-left: 1.5em;
	padding-right:	1.5em;
	text-align: justify;
  & em	{
    font-style: normal;
  }
  & i	{
    font-style: normal;
  }
}

That css seems to work just fine. The Calibre Editor's Check Book function has no problem with it. But, EpubCheck doesn't like it at all. It spits out:

ERROR CSS-008: An error occurred while parsing the CSS: Token "&" not allowed here. expecting a property name.

I don't know what's wrong. Any suggestions?

[JSWolf]

& won't work in most cases. So don't use it. Most programs that handle ePub won't work with &.

[enuddleyarbl]

How should I go about getting <i> and <em> tagged text to be recognizable (in my case, font-style: normal) in text that is styled with an italicized CSS?

BTW: it turns out that if I remove the & in those styles, EpubCheck is happy with it being gone, but then complains about the {} bracketing the font-style:normal stuff.

[enuddleyarbl]

I guess I could try pulling out the stuff the nesting selector was supposed to shortcut and adding it myself. In the above example, I think I'd add the following:

div.chapquote em	{
    font-style: normal;
  }
div.chapquote i	{
    font-style: normal;
  }

[JSWolf]

Originally Posted by enuddleyarbl

How should I go about getting <i> and <em> tagged text to be recognizable (in my case, font-style: normal) in text that is styled with an italicized CSS?

BTW: it turns out that if I remove the & in those styles, EpubCheck is happy with it being gone, but then complains about the {} bracketing the font-style:normal stuff.

That's very poor coding. You should not use <i> or <em> to mean a normal font style.

create a class such as...

.normal {
  font-style: normal;
}

Use the following regex (for a paragraph) to search (in the calibre editor). Replace italic with the name of the class you want.

(?s)(<p\b[^>]*class="[^"]*\bitalic\b[^"]*"[^>]*>(?:(?!</p>).)*?)<(i|em)\b[^>]*>(.*?)</\2>

Use the following regex search for a <div>. Also replace italic with your class name.

(?s)(<div\b[^>]*class=["'][^"']*\bitalic\b[^"']*["'][^>]*>(?:(?!</div>).)*?)<(i|em)\b[^>]*>(.*?)</\2>

This is the replace code for <p> or <div>.

\1<span class="normal">\3</span>

[enuddleyarbl]

I already have a "normal" class. I was initially replacing those <i> and <em> blocks with that. I don't want to do that (manually or with a regex). In those blocks of text that I've formatted with italicized CSS, I want any existing <i> and <em> "spans" to automatically display as "normal". I have a dozen or so classes that are italicized. I was trying to find a reasonable way to modify the CSS to do that.

Replacing all the nesting selectors in those classes with the separately broken out classes works, though it's ugly. But, now Calibre is complaining that those new classes near the bottom of my CSS are problematic because of "no-descending-specificity:"

https://stylelint.io/user-guide/rule...g-specificity/

[JSWolf]

This should be your CSS.

div.chapquote {
/* Chapter Quote (quote at top of chapters) Styling */
  display: block;
  font-style: italic;
  margin-left: 1.5em;
  margin-right: 1.5em;
}
.normal {
  font-style: normal;
}

[JSWolf]

Originally Posted by enuddleyarbl

I already have a "normal" class. I was initially replacing those <i> and <em> blocks with that. I don't want to do that (manually or with a regex). In those blocks of text that I've formatted with italicized CSS, I want any existing <i> and <em> "spans" to automatically display as "normal". I have a dozen or so classes that are italicized. I was trying to find a reasonable way to modify the CSS to do that.

Replacing all the nesting selectors in those classes with the separately broken out classes works, though it's ugly. But, now Calibre is complaining that those new classes near the bottom of my CSS are problematic because of "no-descending-specificity:"

https://stylelint.io/user-guide/rule...g-specificity/

You have to remember that this is ePub, not a full blown web browser. While calibre will handle more then your average ePub reading software because of Qt 6 (via PyQt6). So the regex I supplied is the best way to do this. What you are doing in calibre will not work as an ePub on your Kobo. RMSDK does not support these sorts of things.

[enuddleyarbl]

Well, I just went and brute-forced my CSS. For the class I noted, above, it now looks like this:

div.chapquote {
	/* Chapter Quote (quote at top of chapters) Styling */
	display: block;
	font-style:	italic;
	margin-left:	1.5em;
	margin-right:	1.5em;
	padding-left: 1.5em;
	padding-right:	1.5em;
	text-align: justify;
}
div.chapquote em	{
	font-style:	normal;
}
div.chapquote i	{
	font-style:	normal;
}

I added those em and i classes to every class I had that used

font-style: italic

. Then, when the Calibre Editor's Check Book function complained about specificity for some very specific classes near the bottom of my CSS stylesheet, I just dragged those classes up near the top in their own "because Calibre told me so" section.

Not exactly elegant, but it works.

I've also opened an issue with EpubCheck:

https://github.com/w3c/epubcheck/issues/1765

They could very well come back and say Nesting Selectors don't work in Epubs, so that's why it errors on the & (though a more meaningful error message would be nice).

[Turtle91]

Or you can use a very simple technique that works everywhere:

em em {font-style:normal}
i i   {font-style:normal}
.NameOfYourItalicStyle em, .NameOfYourItalicStyle i {font-style:normal}

This technique can be used because the css is looking for an em inside of an em, or an i inside of an i, or either inside whatever class you use that defines font-style:italic. It is a way to emphasize something by making it different from the surrounding letters/words. Most people would default em to italics but it certainly doesn’t need to… the em could denote a color, or a font size, or a text decoration… anything to emphasize the word.

Eg.

<p class="mentalspeak">I am emphasizing <em>this</em> word 
within a phrase that is italicized.</p>

CSS:
.mentalspeak {font-style:italic}
.mentalspeak em {font-style:normal; color:red; text-decoration:underline}

RESULT:
I am emphasizing this word within a phrase that is italicized.

That provides a very clean, easy to read (in code view), and simple to code.

[KevinH]

DeNesting the css is probably for the best if you want your epub to work on a large number of readers. The support for nesting css is quite new and therefore it is not supported by many e-readers. Plus there are many problems using nested css especially when the nesting gets more than 2 levels deep.

It is for this reason, Sigil has a built-in denesting code in recent versions. Enter it in nested form then use css reformat to unnest it for more general consumption. Ease of entry for you. Nicely denested normal css code that will work almost everywhere for e-readers.

[enuddleyarbl]

Originally Posted by Turtle91

Or you can use a very simple technique that works everywhere:

em em {font-style:normal}
i i   {font-style:normal}
.NameOfYourItalicStyle em, .NameOfYourItalicStyle i {font-style:normal}

...

Aargh! I thought I had the i i or em em code in my stylesheet. But, it wasn't working. I just took another look at it and instead of the descendant combinator you have, I have a child combinator (>). Yours applies to all descendants whereas mine applies to only direct children.

Ugh. In general, my italics are being applied at the div.class level. But, the emphasis is happening at the div.class p or lower level. So, the child combinator wasn't matching. I had assumed it was failing because it was looking for the actual <i> or <em> tags instead of the

font-style: italic

bit.

I'll have to test that just to make sure. Then I'm going to rest for a while before I redo my standard stylesheet again. Ugh.

Thanks, though.