CODEWITHSUNDEEP
cssflaskjinja2
RiBi
RiBi

Reputation: 883

Change font color of alternate links for dynamic content in flask

I'm placing dynamic content on my screen using for loop and jinja templating in flask. I want to change the font color for alternate links placed. I have tried using nth-child as follows, but it doesn't seem to work.

My Code

Dynamic Content in Jinja Template

        {% for item in data %}
        <div class="removeLink">
            <a id="link" href="{{item['link']}}">
                <div id="news">{{item['title']}}</div>
            </a>
        </div>

        {% endfor %}

My CSS

    #news{
        color: white;
        font-size: 20px;
        margin-bottom: 4%;
        margin-top: 1%;
        margin-left: 1%;
        word-wrap: break-word;
    }
    .removeLink a{
        text-decoration: none;
    }

    .removeLink:last-child { 
        margin-bottom: 0px !important; 
    }       
    .removeLink:nth-child(2n) { 
        color: red !important; 
    }

Upvotes: 1

Views: 477

Answers (2)

RiBi
RiBi

Reputation: 883

I figured out the issue in my code so I'm answering my question. I edited my code as follows, with some javascript.

        <div id ="holder" class="removeLink">

            {% for item in data %}
            <a id="link" href="{{item['link']}}">
                <div id="news">{{item['title']}}</div>
            </a>

            {% endfor %}
        </div>

<script type="text/javascript">
    let elements = document.getElementById("holder").getElementsByTagName('div');

    for(let i=0; i<50; i++){
        if (i%2 == 0) {
            console.log(elements[i]);
            elements[i].style.color = "green";
        }
    }
</script>

Upvotes: 0

cam
cam

Reputation: 3624

The #news CSS selector has higher specificity for the link text than the .removeLink:nth-child(2n) selector.

Adjust the selector to create higher specificity. If you're interested, read more about css specificity.

The following should work:

.removeLink:nth-child(2n) #news { 
    color: red !important; 
}

Upvotes: 1

Related Questions