: Css - select only when followed by specific element I have a specific problem in which I need to remove the margin-bottom of every Element that has a class only when followed by the same

Vote Up Vote Down   0 Reactions

Login to give Reaction!

Okay, I kind of found an answer (for this case at least) myself. The key was to walk away from the margin-bottom and look at it the other way around. So first deleting the margin-bottom from p.line and then putting a margin-top on any element that follows the p.line. And then putting the margin-top to "0" on all p.lines that are preceded by another p.line.

That still won't erase the margin from the first p.text but it at least keeps the same classes together and separates to the next different element/class

css

p {
margin-bottom:1em;
}
p.line {
margin-bottom: 0;
}
p.line + *{
margin-top:1.5em;
}
p.line + p.line {
margin-top: 0em;
}

html

<p class="text">text</p>
<p class="line">___</p>
<p class="line">___</p>
<p class="line">___</p>
<p class="text">text</p>

jsfiddle.net/xtmo95ru/

Free books android app tbrJar TBR JAR Read Free books online gutenberg

(0)

Vote Up Vote Down   0 Reactions

Login to give Reaction!

As you've discovered, the challenges here are that:

in CSS, it's not possible to select a parent or ancestor element by its child; the browser applies CSS 'downwards' only; and
you can't know what CSS properties and selectors EPUB2-capable readers will actually support.

If I've understood your needs correctly, here are three possible options you could try. For readability I've renamed your 1 class as line.

Option 1

.line {
margin: 0;
}
.line + .text {
margin-top: 1em;
}

Option 2

.text + .line {
margin: 0;
}
.line + .line {
margin: 0;
}

Option 3

* + .line {
margin: 0;
}

I've created a pen here to demo these: codepen.io/arthurattwell/pen/NQKRrp Just comment out/uncomment the options in the CSS to see how they behave there. You'd need to test in some older EPUB2 readers to see what really works. As @idiotprogrammer explains, support for the adjacent sibling selector (+) is very unpredictable. As I see it, users whose readers support it get your ideal spacing, and those that don't can still read the content at least.

Free books android app tbrJar TBR JAR Read Free books online gutenberg

(0)

Vote Up Vote Down   0 Reactions

Login to give Reaction!

Here's the spec. www.idpf.org/epub/20/spec/OPS_2.0_latest.htm#Section3.1

Support for these css features were limited in EPUB2, plus it's also a question of whether the device or app will support this. Most reading systems have nominal support for EPUB3 (and that's really important for css support). For example, most reading systems today support css media-queries, which is an epub3 feature.

A key thing is to check whether the epub standard requires that the reading system supports this css property. If it's optional, there's a good chance it won't be supported.

I would ask which reading system you are talking about. The most likely reading system to support this feature would be Google Play books -- although even that's iffy. Mostly software reading systems have better support for these css advanced features. I am curious about whether Adobe Digital Editions supports adjacent selectors. (That's the key test). My guess is no.

The most recent Amazon Kindle Publishing Guidelines specifically says that it does not support using the plus sign (+) selector (also known as adjacent sibling selectors) in css code. Sometimes, however, it supports a feature unofficially until it has been tested fully.

Aside from the Amazon publishing guidelines, there's no good reference about css support except for the epub spec. Often I have to do trial and error to see whether a certain feature is supported.

Free books android app tbrJar TBR JAR Read Free books online gutenberg

(0)