Issue styling in CSS so each odd numbered div changes colour and position

Question

I am designing a web page where content appears within speech-bubble shaped divs. I would like to use CSS to modify the div so that every other speech bubble is slightly darker coloured and the pointy part of the speech bubble changes from right to left.

I have been able to change the background colour and text-text-allignment of the main content of each odd-numbered div to a darker shade of grey, however the colour of the 'point' of the speech bubble and it's position from right to left will not change no matter what solution I have tried so far.

The bit that's worked:

/* MAIN BODY OF SPEECH BUBBLE */

.infoBox .aboutBox {

    border-top: 5px solid #670d94;
    background: #eee;
    padding: 1em;
    margin: 2em;
    margin-bottom: 4em; /* */

}

/* CHANGE LAYOUT/COLOUR OF EVERY OTHER SPEECH BUBBLE */

.infoBox:nth-child(odd) .aboutBox {

    background: #c9c9c9;
    text-align: right;

}

And the bit that hasn't:

/* CREATE SPEECH BUBBLE POINT */

.bubble {

    position: relative;
    background: #eee;

}

.bubble::after  {

    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 40px solid transparent; /* */
    border-left: 40px solid transparent; /* */
    border-top: 50px solid #eee; /* */
    right: 50px; /* */

}

/* CHANGE POSITION/COLOUR OF EVERY OTHER SPEECH BUBBLE POINT */

.bubble:nth-child(odd) ::after  {

    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 40px solid transparent; /* */
    border-left: 40px solid transparent; /* */
    border-top: 50px solid #c9c9c9; /* */
    left: 50px; /* */

}

HTML is:

<div class="infoBox">

            <div class="aboutBox bubble">

                <div id="profilePic"> <img align="right" src="img\profileIcon.png"/> </div>

                <b>Name Surname</b>
                <br>
                Job role
                <br>
                <br>
                Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                <hr>

            </div>

        </div>

<div class="infoBox">

            <div class="aboutBox bubble">

                <b>Name Surname</b>
                <br>
                Job role
                <br>
                <br>
                Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                <hr>

            </div>

        </div>

I have attached some images to clarify the solution I was aiming for and the results of my current code. Any help is greatly appreciated!

Answer 1

You were close, but you need to target the odd numbered info box and then set, so:

.infoBox:nth-child(odd) .bubble::after  {
    // Set style
}

The issue is when you do "odd" targeting the bubble directly, there is only 1 in the container so it always matches the selector. You have target the outside container with "odd" and then select the bubble inside it.

Here is a working snippet.

/* MAIN BODY OF SPEECH BUBBLE */

.infoBox .aboutBox {

    border-top: 5px solid #670d94;
    background: #eee;
    padding: 1em;
    margin: 2em;
    margin-bottom: 4em; /* */

}

/* CHANGE LAYOUT/COLOUR OF EVERY OTHER SPEECH BUBBLE */

.infoBox:nth-child(odd) .aboutBox {

    background: #c9c9c9;
    text-align: right;

}

/* CREATE SPEECH BUBBLE POINT */

.bubble {

    position: relative;
    background: #eee;

}

.bubble::after  {

    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 40px solid transparent; /* */
    border-left: 40px solid transparent; /* */
    border-top: 50px solid #eee; /* */
    right: 50px; /* */

}

/* CHANGE POSITION/COLOUR OF EVERY OTHER SPEECH BUBBLE POINT */

.infoBox:nth-child(odd) .bubble::after  {

    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 40px solid transparent; /* */
    border-left: 40px solid transparent; /* */
    border-top: 50px solid #c9c9c9; /* */
    left: 50px; /* */

}

<div class="infoBox">

    <div class="aboutBox bubble">

        <div id="profilePic"> <img align="right" src="img\profileIcon.png"/> </div>

        <b>Name Surname</b>
        <br>
        Job role
        <br>
        <br>
        Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        <hr>

    </div>

</div>

<div class="infoBox">

    <div class="aboutBox bubble">

        <b>Name Surname</b>
        <br>
        Job role
        <br>
        <br>
        Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        <hr>

    </div>

</div>