MobileRead Forums - View Single Post - strange dropcap behavior with/without merged xhmtl

kovidgoyal · 03-01-2018, 11:44 AM

Basically the problem is that :first-of-type applies to the entire CSS selector, that is (h1 ~ p) so it only applies to the first h1 in the file. Which is why splitting the file works, as it means there is only one h1 in each file.

The simplest solution is to simply wrap the content after each h1 in a <div>. Something like,

Code:

<h1>Title</h1>
<div>
<img><img>blah blah
<p>Drop caps</p>
<p> other para</p>
</div>

Then use a adjacent combinator, something like

Code:

h1 + div p:first-of-type { color: red }

The trick here is that first of type now only applies to the p not to the h1 + div (at least if I remember my CSS operator precedence rules correctly, try it and see)

03-01-2018, 11:44 AM	#6
kovidgoyal creator of calibre Posts: 45,423 Karma: 27757236 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Basically the problem is that :first-of-type applies to the entire CSS selector, that is (h1 ~ p) so it only applies to the first h1 in the file. Which is why splitting the file works, as it means there is only one h1 in each file. The simplest solution is to simply wrap the content after each h1 in a <div>. Something like, Code: <h1>Title</h1> <div> <img><img>blah blah <p>Drop caps</p> <p> other para</p> </div> Then use a adjacent combinator, something like Code: h1 + div p:first-of-type { color: red } The trick here is that first of type now only applies to the p not to the h1 + div (at least if I remember my CSS operator precedence rules correctly, try it and see) Last edited by kovidgoyal; 03-01-2018 at 11:48 AM.