View Single Post
Old 09-13-2013, 02:26 PM   #27
Dylan Tomorrow
Connoisseur
Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.Dylan Tomorrow ought to be getting tired of karma fortunes by now.
 
Posts: 62
Karma: 640495
Join Date: Jul 2012
Location: Germany
Device: Kindle Touch, Android smartphone w/ FBReader
Thumbs up :not() works too!

First of all, Doitsu, thanks for making this list! As someone who loves tweaking the CSS of his e-books, this is great news. Also, thanks to you, PoP and RbnJrg for your beautiful example snippets and screenshots!

Now you can add the :not() pseudo-class to the list .

I was tweaking an EPUB before putting it on my kindle via kindlegen and wanted consistent paragraph indentation with the margins removed. First I set up the formatting (all text body paragraphs already had the para class set, so I sent with that):
Code:
.para {
display: block; 
margin: 0;
text-indent: 5%;}
Then I defined the exceptions for paragraphs following anything other than another body text paragraph (again, I used the already present opening-para class) with this rule:
Code:
p:not(.opening-para):not(.para) + .para,
:not(p) + .para {
text-indent:0;
margin-top: 1em;}
which successfully selects and is applied to (I checked all of those):
Code:
p.caption + .para,
p.image + .para,
p.center + .para,
div + .para,
ol + .para,
ul + .para
on my Kindle Touch (firmware version 5.1.2, EPUB file was converted to KF8 with kindlegen 2.9).

So :not() definitely works when it contains a simple selector consisting of one class or element and using multiple :not() pseudo-classes on one element as well. I didn't need any other of the allowed simple selectors within a :not() pseudo-class, but I bet they work too!

@William Ockham: I disagree. I actually think these pseudo-classes and pseudo-elements should absolutely be used in production e-books, just like 52novels and their colleague did (of course along with fall-back rules for essential formatting if MOBI7/EPUB on Nook etc. would otherwise look awful), as it is very unlikely the webkit versions used in future e-reader software and hardware iterations will support less of those very useful CSS3 features.

KF8 is quite close to EPUB in its HTML5 and CSS3 support (even if Amazon don't admit how much CSS3 they actually already support yet – though kindlegen only erroring out on ::before with auto-incrementing counters and nothing else is kind of admitting support of all those selectors) and the more CSS3 support e-readers have, the better. The more of those practical CSS3 features are actually used in commercial e-books, the more rendering platforms will want to support them, too.

Way to many e-books have appalling markup and stylesheets—floods of superfluous <div>s, <span>s and classes everywhere, inline style declarations, classes named non-semantically, <span>s with italics/bold classes instead of <em>s/<strong>s, no complex selectors at all … *cringe* Makes for terribly inflexible and hard to change stylesheets. The more of those CSS3 selectors are broadly supported in e-readers, the easier it will be to markup and style e-books in an adaptable, easy-to-change-and-maintain way. Which ultimately leads to less cruft and faster rendering on e-readers, yay!</SoapBox>

Last but not least – ::first-letter, ::first-line, ::before and ::after are pseudo-elements, not pseudo-classes. SCNR!</OCD>

Last edited by Dylan Tomorrow; 09-13-2013 at 02:48 PM. Reason: typos, loads of them
Dylan Tomorrow is offline   Reply With Quote