Edit in JSFiddle

/*


Styles the p differently depending on how many there are...


*/
<div>
    <h3>1 P</h3>
    <p>1</p>
</div>
<div>
    <h3>2 P's</h3>
    <p>1</p>
    <p>2</p>
</div>
<div>
    <h3>3 P's</h3>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
/* Only one :D */
p {
    background: lightblue;
}

/* Two */
p:nth-last-of-type(2), p:nth-last-of-type(2) ~ p {
    background: lightpink;
}

/* Three */
p:nth-last-of-type(3), p:nth-last-of-type(3) ~ p {
    background: red;
}

/* Prettify the example */
p {
    display: inline-block;
    border-radius: 25px;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 12px 0 0 0;
    text-align: center;   
}