The nth-child selector does not alter the color for both odd and even elements

In this Django project, I am iterating over folders and files. Each file should have a different background color - odd ones purple, even ones blue. However, all files are currently displaying as purple.

Below is the HTML for the file div:

<div class="each_key">{{file}}</div> 

Here is the CSS styling for the files:

.each_key:nth-child(odd){
    text-align: left;
    width:197px;
    height:42px;
    background-color: purple;
    padding:10px;
}

.each_key:nth-child(even){
    text-align: left;
    width:197px;
    height:42px;
    background-color: blue;
    padding:10px;
}

I have also attempted using "nth-of-type" but it still only displays in purple rather than alternating between purple and blue.

Answer №1

For this particular task, you can utilize the expressions (2n+1) and (2n).

.each_key:nth-child(2n+1){
    text-align: left;
    width:197px;
    height:42px;
    background-color: purple;
    padding:10px;
}

.each_key:nth-child(2n){
    text-align: left;
    width:197px;
    height:42px;
    background-color: blue;
    padding:10px;
}
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery data list fails to transfer to the HTML element

Currently, I am facing an issue while reading a JSON file and extracting the values for type. My objective is to pass these values as a list to the HTML element #myList, but instead of the desired list, I am getting [object object]. Surprisingly, when I ch ...

Click on checkboxes to toggle selection in PHP table

I have a table that includes a checkbox in the header, intended to toggle all checkboxes below it. I've implemented a JavaScript function for the header checkbox, but it only selects the top checkbox instead of all of them. Any recommendations or guid ...

The CSS syntax definition for list styles

Inside the body of my site is this code: Here is the HTML: <ul id="navlist"> <li class="first"> <a href="/" id="current">Home</a> </li> <li> <a href="/Store/">Store</a> </ ...

Django is throwing an error saying that the namespace "polls" has not been registered

Working on my very first app, a Poll and Choice app, was quite an adventure yesterday thanks to the tutorial I used. The main page should show the question, and when clicked, it is expected to display various choices for users to vote on. While I had exce ...

A step-by-step guide on pulling information from a JSON response generated by an API in Python with the Django framework

I am working on creating a charge and I need to retrieve the 'hosted_url' from it in order to redirect a user to another page. Although I am attempting to extract this information from JSON, I am relatively new to this and unsure of the process. ...

"Implementing a Drop-Down Menu within a Text Field using Bootstrap

I'm looking to integrate a dropdown menu within my text input field with the help of Bootstrap: <script type="text/javascript"> $(document).ready(function(e) { $('.selectpicker').selectpicker(); $('div.cow&apo ...

Tips for creating a menu bar where the entire item area is clickable

Currently, I am working on implementing a menu bar control. Below is the CSS and design code that I have used: CSS : .Menu { background:transparent url(../images/blueslate_background.gif) repeat-x; text-align:center; font-family : "lucida g ...

I am facing an issue where the CSS style sheet is not connecting to my HTML file

I'm facing an issue with linking my CSS style sheet to my HTML file using the following code: <link ref="stylesheet" href="../landing/css/stylesheet.css" type="text/css"/> Even though I have checked the directory l ...

Persistent table header and fixed column in table

Trying to create an HTML table with a fixed header and fixed first two columns, but encountering issues with the table displaying at the top of the page instead of below a div with a yellow background. Looking for a solution similar to the one shown in the ...

The accessibility of the manager cannot be attained through instances of the `Model`

I am working with a polymorphic tagging model and I am attempting to create a tag cloud for it. However, when I try to count the related objects to tags tags = TaggedItem.objects.all() # Calculate tag, min and max counts. min_count = max_count = tags[0]. ...

Tips for positioning a website's name above navigation links in a header | Using HTML and CSS

I need assistance in placing the website name above the navigation bar on my webpage. I have included HTML and CSS codes below. The {load static} command within the HTML code loads CSS files in a Django project, but in this case, there is no Django involv ...

Guide to adjusting the number of bounces using jQuery's User Interface (UI)

Check out my code on CodePen: http://codepen.io/Chiz/pen/jbwPLO (click anywhere in the blank area) I'm trying to figure out how to adjust the number of bounces a div makes before stopping. For example, I want the div to bounce 10 times and also chang ...

Utilizing JSON data in Django Views: A Step-by-Step Guide

My goal is to utilize JSON data from an API in a Django View. Below is an example of the JSON data I am working with: [{'Count': 5491}] I specifically need to extract the value associated with the "Count" key and pass it to an HTML template. In ...

Organizing pictures within bootstrap columns

Having an issue with CSS while using Bootstrap. I am attempting to align the columns in a way that the bottom line of the images inside each column match, not the top line. Despite trying everything I can think of, I have not been successful. Is there an ...

Arranging elements in a row and column to ensure proper alignment

https://i.stack.imgur.com/LMsTg.png I'm having trouble aligning the UI elements in my Bootstrap 5 project. I can't seem to pinpoint the issue despite trying various solutions. Here's the code snippet: <div class="container"> ...

Searching by foreign key in Django admin's add form

When adding new objects in the Django admin form, there are sometimes linked foreign keys that can be selected from a dropdown menu. Is there a way to include a search box for these foreign keys directly within the form? For instance, imagine I have a Boo ...

Ensure the navbar includes the .container class and insert an extra dropdown right next to the container without causing any misalignment

Desired output: Achieve two rows with a .container div, centered in the viewport and aligned with each other. The second row should contain the navbar within a .container. Additionally, add a non-collapsing dropdown at the end of the navbar row, outside th ...

Having trouble with the pagination feature for comments in Django

Hey! I'm diving into Django and facing a puzzling issue that I can't wrap my head around. Here's the scenario: def article(request, article_id = 1, comments_page_number = 1): all_comments = Comments.objects.filter(comments_article_id = ...

Getting the css property scaleX with JQuery is as simple as executing the

I am struggling to print out the properties of a specific div element using jQuery. My goal is to have the different css properties displayed in an information panel on the screen. Currently, I am facing difficulties trying to show scaleX. Here is my curr ...

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...