Search code examples
cssantenna-house

Omitting a border when there are 2 consecutive paragraphs


I've got a paragraph style that includes borders:

p.caution {
    border-top: 1.5pt double #FF0000;
    border-bottom: 1.5pt double #FF0000;
}

When my document contains 2 consecutive 'Caution' paragraphs, I'd like to omit the borders between those paragraphs. I want to omit two borders: border-bottom on the first paragraph and border-top on the second para.

So this is my desired result:

enter image description here

There doesn't seem to be a CSS selector that allows me to look at the next paragraph.
border-collapse: collapse; doesn't have the desired result either.

Is this possible? (I'm working on CSS Paged Media using the Antennahouse renderer, but this doesn't seem to be a Paged Media-specific question)

HTML snippet:

<div>
  <p class="other">some text</p>
  <p class="caution">some text</p>
  <p class="caution">more text</p>
  <p class="other">some text</p>
</div>

Solution

  • I ended up using an XSLT to modify my input HTML. I added an attribute to specify where I want a border to appear:

    <xsl:template match="p[@class='caution']">
            <xsl:copy>
                <xsl:apply-templates select="@*"/>
                <xsl:attribute name="border-after">
                    <xsl:choose>
                        <xsl:when test="following-sibling::*[1]/@class='caution'">no</xsl:when>
                        <xsl:otherwise>yes</xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>
                <xsl:attribute name="border-before">
                    <xsl:choose>
                        <xsl:when test="preceding-sibling::*[1]/@class='caution'">no</xsl:when>
                        <xsl:otherwise>yes</xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>
                <xsl:apply-templates select="node()"/>
            </xsl:copy>
        </xsl:template>
    

    and in my CSS:

    p.caution[border-after="yes"] {
        border-bottom: 3pt double #FF0000;
    } 
    p.caution[border-after="no"] {
        margin-bottom: 3pt;
    } 
    p.caution[border-before="yes"] {
        border-top: 3pt double #FF0000;
    }
    p.caution[border-before="no"] {
        margin-top: 3pt;
    }