Having trouble changing the color of my divs.
I am unsure how to set a different background color for each even div contained within an li element.
For instance:
<ul>
<li class="demo1">
<div class="d">
COLOR BLUE
</div>
</li>
<li class="demo1">
<div class="d">
COLOR RED
</div>
</li>
.
.
.
</ul>
I attempted using :nth-child but it is not functioning properly (I only specified the class name of the div).
For styling alternate elements in your CSS, you have the option of using either even or odd.
.myElements:nth-child(even){
background-color: blue;
}
Here is an example of utilizing the even selector in your code:
ul li > div {
background: blue;
}
ul li:nth-child(even) > div {
background: red;
}<ul>
<li class="demo1">
<div class="d">
COLOR BLUE
</div>
</li>
<li class="demo1">
<div class="d">
COLOR RED
</div>
</li>
<li class="demo1">
<div class="d">
COLOR BLUE
</div>
</li>
<li class="demo1">
<div class="d">
COLOR RED
</div>
</li>
</ul><!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(odd) {
background: blue;
}
p:nth-child(even) {
background: red;
}
</style>
</head>
<body>
<p>RED.</p>
<p>Blue</p>
<p>Red</p>
<p>Blue</p>
</body>
</html>You Can Utilize odd & even in this manner
mydiv:nth-child(1n) {
background: blue;
}
mydiv:nth-child(2n) {
background: yellow;
}
alternate method
mydiv:nth-child(even){
background: orange;
}
To target the div within a specific :nth-child of the list item, you can use the following example:
For Example: https://codepen.io/Albyzai/pen/JjNbNxG
HTML Section
<ul>
<li>
<div class="d"></div>
</li>
<li>
<div class="d"></div>
</li>
<li>
<div class="d"></div>
</li>
<li>
<div class="d"></div>
</li>
<li>
<div class="d"></div>
</li>
</ul>
CSS Section:
ul {
list-style: none;
}
.d {
width: 100px;
height: 50px;
border: 1px solid #000;
}
li:nth-child(even) div {
background: red;
}
On my page, users have the option to narrow down their search using filters. However, there is an issue where if a user selects a filter for "rent" or "buy", the URL does not automatically refresh to reflect the changes. Even though the changes are reflect ...
Below is a sample of my HTML+CSS code: <div> <div class="first">text</div> <div>more text</div> </div> div { display: inline; } .first { display: block; } What's interesting is that when the first ...
removeConnection(event) { let parentElement = document.getElementById('RemoveElement'); let childElement = document.getElementById(event.target.id); parentElement.removeChild(childElement); } Whenever I try to remove the child ...
I have designed a table with a specified height (such as 70vh). I am looking to add a vertical column divider that spans the entire height of the table. I can achieve this using CSS for the TableCell component. However, I want the vertical column divider t ...
Running Angular version 7.0.0 will generate a folder structure typical for "ng new". Below is the content of my styles.less file: @personal-black: #0000; This snippet shows the content of my app.component.less file: ...
I am currently using MUI (v5) List component. My list is quite simple, with each item having text on the left and a value on the right. The issue arises when the list's width shrinks as the window size decreases. The text on the left (<ListItemTe ...
Currently, I am in the process of creating a Jest test. It appears that when fireEvent.click is called after an asynchronous it, the function does not get triggered. In this scenario, it is evident that a few lines of code speak louder than lengthy explan ...
Is it possible to upload the whole file at once like this: myInput.onchange = ({ target }) => { const file = target.files[0]; const formData = new FormData(); formData.append("fileData", file); // ...then I post "formData" ...
I'm attempting to show the Indian rupee symbol using HTML code ₹ The HTML code is being echoed in PHP and everything seems to be working fine, except that the rupee symbol is not showing up. I've tested using other currency symbols and the ...
Currently, I am working on setting up routing with Meteor using the react-router package. However, I have encountered a specific TypeError: Here is a link to an image that provides more context: This is the code snippet from my main.js file: import Reac ...
I discovered some amazing pure CSS checkboxes that I wanted to implement (http://codepen.io/imohkay/pen/zFwec) on a WordPress website utilizing the Contact Form 7 plugin. However, after selecting these checkboxes, nothing seems to happen. To resolve this ...
As someone new to web design, I recently completed my very first site using a combination of HTML, CSS, and a touch of JavaScript. I managed to create a small contact form within the site, but now I'm wondering if there's a way to make it functio ...
I'm currently working with two classes - one that holds the array and another that holds the array props. Here is an overview of these classes: //PARENT CLASS: constructor() { super() this.state = { items: [] } this.addItem = thi ...
Looking for some help with jQuery and JavaScript, please bear with me if my question seems naive. I am attempting to load images from different folders into corresponding divs to create a gallery. <div id="menu"> <div class="gallery" id="div0"&g ...
After carefully following the instructions in the documentation on implementing ScrollToTop with React Router, I am still facing issues getting the function to work properly. To address this, I created a component named ScrollToTop.js containing the code s ...
Recently, I started learning redux and got stuck on how to access an object component within a redux reducers. Specifically, I am trying to access the address component inside the user object but I seem unable to do so due to it being a key. Is there a v ...
Is there a way to customize the cursor pointer style on MUI Link? I've tried using the 'cursor: pointer' style but it doesn't seem to work. Here is my code: <Link style={{ cursor: 'pointer' }} onClick={() => { ...
Please take a look at this JSFiddle example for reference. I am currently working with tablesort and its associated CSS to achieve alternating row colors for the rows containing first and last names. Additionally, I want the rows within the sub-table disp ...
I am attempting to update the img src value by utilizing the data from the span tag Although I have successfully retrieved the value for the span tag, I am struggling to find a method to change the img src value The issue lies in the fact that the span tag ...
Looking for assistance with a ReactJS rating stars component that behaves oddly. The starting value is set to 5 stars, but each click on the stars seems to return the previous value rather than the current one. import React, {useState} from "react&quo ...