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.