More Efficient Way of Re-using This Code?

[MBM]

I’m using a left corner ribbon on two text boxes adjacent to each other. I have changed two lines of code to alter the position of the ribbon so I could place it on the second text box but had to make a second class with a different name i.e. .ribbon-inner2 and .ribbon-outer2. Is there a way to use the same code without creating a second class?

            <div class="ribbon-outer">
            <div class="ribbon-inner">Offer 1</div></div>
            <p class="special">Place details of your special offers in this text box</p>

            <div class="ribbon-outer2">
            <div class="ribbon-inner2">Offer 2</div></div>
            <p class="special2">Place details of your special offers in this text box</p>

            .ribbon-outer
            {
            width:105px;
            height:108px;
            overflow:hidden;
            position:absolute;
            top: 218px;
            left: 80px;
            }
            .ribbon-inner
            {
            font-family: 'Ubuntu';
            font-size: 18px;
            font-weight:bold;
            background: #c62002;
            text-align:center;
             color:#FFFFFF;
            top:25px;
            left:-48px;
            width:170px;
             padding:5px;
             position:relative;
            -webkit-transform: rotate(-45deg);
            }
            .ribbon-inner:before, .ribbon-inner:after {
            content: "";
            border-top: 3px solid #CC7A29;
            border-left:3px solid transparent;
            border-right: 3px solid transparent;
            position:absolute;
            bottom: 3px;
            }

            .ribbon-inner:before {
            left: 0;
            }
            .ribbon-inner:after {
            right: 0;
            }

            .ribbon-outer2
            {
            width:105px;
            height:108px;
            overflow:hidden;
            position:absolute;
            top: 218px; /* vertical position of ribbon */
            left: 600px; /* horizontal position of ribbon */
            }
            .ribbon-inner2
            {
            font-family: 'Ubuntu';
            font-size: 18px;
            font-weight:bold;
            background: #c62002;
            text-align:center;
             color:#FFFFFF;
            top:25px;
            left:-48px;
            width:170px;
             padding:5px;
             position:relative;
            -webkit-transform: rotate(-45deg);
            }
            .ribbon-inner2:before, .ribbon-inner2:after {
            content: "";
            border-top: 3px solid #CC7A29;
            border-left:3px solid transparent;
            border-right: 3px solid transparent;
            position:absolute;
            bottom: 3px;
            }

            .ribbon-inner2:before {
            left: 0;
            }
            .ribbon-inner2:after {
            right: 0;
            }

[MBM]

Thanks. That works but I don’t understand why!

In the HTML I have :

<div class="ribbon-outer">
<div class="ribbon-inner">Offer 1</div></div>
<p class="special">Place details of your special offers in this text box</p>

<div class="ribbon-outer">
<div class="ribbon-inner">Offer 2</div></div>
<p class="special2">Place details of your special offers in this text box</p>

And in the css :

.special + .ribbon-outer {top: 218px;left: 600px;}

Why does this display on the second text box (on the right) and not the first (on the left)?

[MBM]

Thanks. Using + or ~ had the same effect i.e. displayed on the second text box.

[Author]

Posts