Using :has() pseudo-class ?

[Zillion_]

Hello, I have an issue trying to use :has() pseudo-class selectors in e-books.

Example:
.ChapterS:has(+.SubChapter) {
margin-bottom: 1em !important;
color: red !important;
}

The Kindle conversion logs show this:

Reading TOC from NCX...
Merging user specified metadata...
Detecting structure...
Inserting metadata into book...
Flattening CSS and remapping font sizes...
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ blockquote)' (The pseudo-class :has() is unknown)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .ChapterLocation)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .SubChapter)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ blockquote)' (The pseudo-class :has() is unknown)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .ChapterLocation)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .SubChapter)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ blockquote)' (The pseudo-class :has() is unknown)

Calibre supports them correctly for the display in the editor (text displays correctly, tested with some color tags) but the conversion doesn't.
Is this an issue in Calibre or in KFX Output ? (unclear to me)

[JSWolf]

Originally Posted by Zillion_

Hello, I have an issue trying to use :has() pseudo-class selectors in e-books.

Example:
.ChapterS:has(+.SubChapter) {
margin-bottom: 1em !important;
color: red !important;
}

The Kindle conversion logs show this:

Reading TOC from NCX...
Merging user specified metadata...
Detecting structure...
Inserting metadata into book...
Flattening CSS and remapping font sizes...
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ blockquote)' (The pseudo-class :has() is unknown)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .ChapterLocation)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .SubChapter)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ blockquote)' (The pseudo-class :has() is unknown)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .ChapterLocation)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ .SubChapter)' (Expected an argument, got <DELIM '.' at 16>)
Ignoring CSS rule with invalid selector: '.ChapterS:has(+ blockquote)' (The pseudo-class :has() is unknown)

Calibre supports them correctly for the display in the editor (text displays correctly, tested with some color tags) but the conversion doesn't.
Is this an issue in Calibre or in KFX Output ? (unclear to me)

Try converting to KF8 and see if the pseudo class still works. It could be an issue KFX not supporting it.

[DNSB]

Originally Posted by Zillion_

Hello, I have an issue trying to use :has() pseudo-class selectors in e-books.
....
Calibre supports them correctly for the display in the editor (text displays correctly, tested with some color tags) but the conversion doesn't.
Is this an issue in Calibre or in KFX Output ? (unclear to me)

For KFX supported attributes and tags, have you looked at the Attributes and Tags Supported by Enhanced Typesetting page in the appendices to the Amazon's Kindle Publishing Guidelines?

You can also check the HTML and CSS Tags Supported in Kindle Format 8 in the same document.

As far as I am aware, ePub3 added support for :has in version 3.3 when CSS support was updated to Selectors Level 4. IRL, that translates to most support other than Apple's Books and Kobo's apps and proprietary renderer is poor to non-existent.

calibre's ebook viewer is Chromium browser based and a very poor choice for testing what output will look like on an ereader. For the most part, I find using a couple of apps and physical devices is the best way to test before publishing.

[kovidgoyal]

Conversion does not support has() because the underlying css library does not support it

[kovidgoyal]

https://github.com/kovidgoyal/calibr...d273e06a3132b2

[Zillion_]

thanks Kovid!