Answers.Body: <p>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. </p>
  
  <p>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</p>
  
  <p>css</p>
  
  <pre><code>p {
    margin-bottom:1em;
  }
  p.line {
    margin-bottom: 0;
  }
  p.line + *{
    margin-top:1.5em;
  }
  p.line + p.line {
    margin-top: 0em;
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;p class="text"&gt;text&lt;/p&gt;
  &lt;p class="line"&gt;___&lt;/p&gt;
  &lt;p class="line"&gt;___&lt;/p&gt;
  &lt;p class="line"&gt;___&lt;/p&gt;
  &lt;p class="text"&gt;text&lt;/p&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/xtmo95ru/" rel="nofollow noreferrer">https://jsfiddle.net/xtmo95ru/</a>   </p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-20T08:38:18.750Z
Answers.Text: Nice! Perhaps similarly to you, I always aim to handle vertical spacing with `margin-bottom`, to avoid getting unexpected results as I add to complex CSS files over time. But sometimes the occasional `margin-top` with a sibling selector  is the only way to achieve a desired result.
Answers.UserDisplayName: Arthur
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-19T14:54:43.473Z
Answers.LastActivityDate: 2019-07-19T14:54:43.473Z
Answers.UserDisplayName: SabineR
Answers.Body: <p>As you've discovered, the challenges here are that:</p>
  
  <ol>
  <li>in CSS, it's not possible to select a parent or ancestor element by its child; the browser applies CSS 'downwards' only; and</li>
  <li>you can't know what CSS properties and selectors EPUB2-capable readers will actually support.</li>
  </ol>
  
  <p>If I've understood your needs correctly, here are three possible options you could try. For readability I've renamed your <code>1</code> class as <code>line</code>.</p>
  
  <p><strong>Option 1</strong></p>
  
  <pre><code>.line {
    margin: 0;
  }
  .line + .text {
    margin-top: 1em;
  }
  </code></pre>
  
  <p><strong>Option 2</strong></p>
  
  <pre><code>.text + .line {
    margin: 0;
  }
  .line + .line {
    margin: 0;
  }
  </code></pre>
  
  <p><strong>Option 3</strong></p>
  
  <pre><code>* + .line {
    margin: 0;
  }
  </code></pre>
  
  <p>I've created a pen here to demo these: <a href="https://codepen.io/arthurattwell/pen/NQKRrp" rel="nofollow noreferrer">https://codepen.io/arthurattwell/pen/NQKRrp</a> 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 (<code>+</code>) 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.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-18T08:17:24.313Z
Answers.Text: Thank you. Sadly it doesn't work. Option 1 and 2 can't be used anyway, because the elements before and after are various and not only a specific p.text. And the 3. Option doesn't work because it still selects the p.line folowed by any other element and class. (Even though I'm not sure how it works with your exhample anyway)
Answers.UserDisplayName: SabineR
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-19T13:53:25.613Z
Answers.Text: In general, I find that software-based reading systems support these advanced css features better than hardware-based. The main exception is css media queries (an epub3 feature) which was supported almost immediately in all reading systems...
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-17T09:08:07.130Z
Answers.LastActivityDate: 2019-07-17T09:08:07.130Z
Answers.UserDisplayName: Arthur
Answers.Body: <p>I was just playing around and in Chrome v90.0.4x it appears that one can fudge and combine &quot;:not()&quot; and sibling &quot;+&quot; selectors. So in my situation it looked like this: <code>div.site-content header.page-header h1.page-title:not( + div.taxonomy-description)</code></p>
  <p>There is also some discussion of a forthcoming &quot;:has()&quot; selector.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-01T22:33:18.877Z
Answers.LastActivityDate: 2021-07-01T22:33:18.877Z
Answers.UserDisplayName: iamwoodruff
Answers.Body: <p>Here's the spec. <a href="http://www.idpf.org/epub/20/spec/OPS_2.0_latest.htm#Section3.1" rel="nofollow noreferrer">http://www.idpf.org/epub/20/spec/OPS_2.0_latest.htm#Section3.1</a> </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>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.  </p>
  
  <p>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. </p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-18T08:21:28.900Z
Answers.Text: I need the ebup to be compatible with ADE. It's weird that the kindle guidelines say that they don't support the +-sign. I already use it and the kindle previewer never reported it (only cases of max-height for some reason).
Answers.UserDisplayName: SabineR
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-19T13:55:24.177Z
Answers.Text: Sometimes Kindle supports things unofficially without it being in the guidelines.  You can only learn about these undocumented features by trying things out yourself or hearing about it from someone else :)
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-19T13:59:59.477Z
Answers.Text: Also, my guess is that the e-ink devices do not support this CSS. (Maybe Kindle Previewer shows it working correctly, but if you tested it on an actual device, you may find something different).
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-16T15:41:59.500Z
Answers.LastActivityDate: 2019-07-16T15:41:59.500Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>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 element with the same class. 
  So p.1 has a margin-bottom:1em to give space to any other element that comes after it. But if p.1 is followed by another p.1 the margin-bottom should be 0. The thing is, I can't just give p.text a margin-top because of reasons I don't really want to elaborate.</p>
  
  <pre><code>&lt;p class="text"&gt;text&lt;/p&gt;
  &lt;p class="1"&gt;___&lt;/p&gt;
  &lt;p class="1"&gt;___&lt;/p&gt;
  &lt;p class="1"&gt;___&lt;/p&gt;
  &lt;p class="text"&gt;text&lt;/p&gt;
  </code></pre>
  
  <p>So in this exhample the first and second p class="1" need to be selected. I tried p.1 + p.1 but this only selects the second and third because it selects the sibling preceded by another one and not the sibling that is followed by one. Is this understandable?</p>
  
  <p>Is there any way to do that in EPUB2?</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-07-16T15:44:38.160Z
Comments.Text: Instead of saying epub2, why not tell us which reading system you are talking about. Generally no epub2 system supports adjacent selectors, but current epub readers support generally support some parts of epub3.
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-07-18T07:55:54.970Z
Comments.Text: but if it's not declared with the namespace for epub3 how could I use parts of epub3 in dese files?
  I need it for ADE based readers. As in Tolino...
Comments.UserDisplayName: SabineR
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-07-19T13:58:01.220Z
Comments.Text: fyi, all epub-reading systems (AFAIK) can open and read epub3 files (Whether they support its features is another matter).  So I would always create epub3 files instead of epub2 files -- unless there is a specific reason justifying the exception.
Comments.UserDisplayName: idiotprogrammer
Tags: <epub><css>
Title: css - select only when followed by specific element
UserDisplayName: SabineR
ThreadText: # css - select only when followed by specific element
  
  (Asked by: username_0 on 2019-07-12)
  
  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 element with the same class.
  So p.1 has a margin-bottom:1em to give space to any other element that comes after it. But if p.1 is followed by another p.1 the margin-bottom should be 0. The thing is, I can't just give p.text a margin-top because of reasons I don't really want to elaborate.
  
  ```
  <p class="text">text</p>
  <p class="1">___</p>
  <p class="1">___</p>
  <p class="1">___</p>
  <p class="text">text</p>
  
  ```
  
  So in this exhample the first and second p class="1" need to be selected. I tried p.1 + p.1 but this only selects the second and third because it selects the sibling preceded by another one and not the sibling that is followed by one. Is this understandable?
  
  Is there any way to do that in EPUB2?
  
  **Tags:** epub, css
  
  > **Comments:**
  > **username_1**: Instead of saying epub2, why not tell us which reading system you are talking about. Generally no epub2 system supports adjacent selectors, but current epub readers support generally support some parts of epub3.  
  > **username_0**: but if it's not declared with the namespace for epub3 how could I use parts of epub3 in dese files? I need it for ADE based readers. As in Tolino...  
  > **username_1**: fyi, all epub-reading systems (AFAIK) can open and read epub3 files (Whether they support its features is another matter).  So I would always create epub3 files instead of epub2 files -- unless there is a specific reason justifying the exception.  
  
  ---
  
  ## 4 answers
  
  ### Answer by username_0 on 2019-07-19. Score: 1
  
  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>
  
  ```
  
  <https://jsfiddle.net/xtmo95ru/>
  
  > **Comments:**
  > **username_2**: Nice! Perhaps similarly to you, I always aim to handle vertical spacing with `margin-bottom`, to avoid getting unexpected results as I add to complex CSS files over time. But sometimes the occasional `margin-top` with a sibling selector  is the only way to achieve a desired result.  
  
  ---
  
  ### Answer by username_2 on 2019-07-17. Score: 1
  
  As you've discovered, the challenges here are that:
  
  1. in CSS, it's not possible to select a parent or ancestor element by its child; the browser applies CSS 'downwards' only; and
  2. 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: <https://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 @username_1 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.
  
  > **Comments:**
  > **username_0**: Thank you. Sadly it doesn't work. Option 1 and 2 can't be used anyway, because the elements before and after are various and not only a specific p.text. And the 3. Option doesn't work because it still selects the p.line folowed by any other element and class. (Even though I'm not sure how it works with your exhample anyway)  
  > **username_1**: In general, I find that software-based reading systems support these advanced css features better than hardware-based. The main exception is css media queries (an epub3 feature) which was supported almost immediately in all reading systems...  
  
  ---
  
  ### Answer by username_3 on 2021-07-01. Score: 0
  
  I was just playing around and in Chrome v90.0.4x it appears that one can fudge and combine ":not()" and sibling "+" selectors. So in my situation it looked like this: `div.site-content header.page-header h1.page-title:not( + div.taxonomy-description)`
  
  There is also some discussion of a forthcoming ":has()" selector.
  
  
  ---
  
  ### Answer by username_1 on 2019-07-16. Score: 0
  
  Here's the spec. <http://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.
  
  > **Comments:**
  > **username_0**: I need the ebup to be compatible with ADE. It's weird that the kindle guidelines say that they don't support the +-sign. I already use it and the kindle previewer never reported it (only cases of max-height for some reason).  
  > **username_1**: Sometimes Kindle supports things unofficially without it being in the guidelines.  You can only learn about these undocumented features by trying things out yourself or hearing about it from someone else :)  
  > **username_1**: Also, my guess is that the e-ink devices do not support this CSS. (Maybe Kindle Previewer shows it working correctly, but if you tested it on an actual device, you may find something different).  
  
  ---
  
  