Adjusting the hue of each fifth div

There are multiple divs in a row, with 4 divs in each row.

To adjust the padding of every 4th div, I'm using the nth-child selector.

Now, I am looking to modify the rollover property every 5th time.

Here is an example of what I have in mind:

.content_tab_hover:nth-child(5n+1){
    background: #ce1c5e;
}
.content_tab_hover:nth-child(5n+2){
    background: #009acf;
}
.content_tab_hover:nth-child(5n+3){
    background: #fcc712;
}
.content_tab_hover:nth-child(5n+4){
    background: #742f68;
}
.content_tab_hover:nth-child(5n+5){
    background: #389a28;
}

Check out this Fiddle for reference: http://jsfiddle.net/craigzilla/TuRzD/

Any insights on where I might be making a mistake?

htmlcsscss-selectors

Answer №1

To enhance the style, modify the selector. Instead of 

.content_tab_hover:nth-child()...
, use 
.content_tab:nth-child() .content_tab_hover
.

Consider implementing the following changes:

.content_tab:nth-child(5n+1) .content_tab_hover{
    background: #ce1c5e;
}
.content_tab:nth-child(5n+2) .content_tab_hover{
    background: #009acf;
}
.content_tab:nth-child(5n+3) .content_tab_hover{
    background: #fcc712;
}
.content_tab:nth-child(5n+4) .content_tab_hover{
    background: #742f68;
}
.content_tab:nth-child(5n+5) .content_tab_hover{
    background: #389a28;
}

View the updated jsfiddle here: http://jsfiddle.net/TuRzD/6/

Answer №2

Ensure you are pinpointing the correct DIV. The proper selection should be:

.content_section:nth-child(3n+1) .content_section_hover{
    background: #ce1c5e;
}
.content_section:nth-child(3n+2) .content_section_hover{
    background: #009acf;
}
.content_section:nth-child(3n+3) .content_section_hover{
    background: #fcc712;
}


.content_section:hover:nth-child(n)
will target the appropriate nth .content_section_hover component within every .overlay 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

Save user input data into an Excel file using PHPExcel

Could someone assist me with storing values from my form inputs to Excel using PHPExcel? I have successfully stored data from my table to Excel, but now I want to store the values from my inputs. Can anyone help me, please? Example of the form inputs: ent ...

javascriptphphtmlmysqlphpexcel

Chrome's Tab key causing unremovable black border [2022]

Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...

cssfrontendbootstrap-5

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

Alignment of Inline SVG in HTML

I am struggling to align an inline SVG within a bounding DIV correctly, as shown in this example. <!DOCTYPE html> <html> <body> <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;"> < ...

htmlsvgalignment

Guide on submitting a get form and retrieving the information

Currently, I am employed as a penetration tester for a company. While conducting an analysis of their website, I discovered a vulnerability where CSRF tokens are generated via a GET request to the page localhost/csrf-token and then provided in plaintext fo ...

javascriptphpjqueryhtmlcurl

The html.dropdown feature is not maintaining the selected value chosen

After successfully filling out my form and submitting data to the database, I encountered a problem with the drop downs on the form not showing the selected value if the model fails validation. Although the HTML clearly shows that the value of the dropdow ...

htmlasp.net-mvcasp.net-mvc-4razor

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

I am currently attempting to utilize a flexbox in order to display several 600x300 images, however, I am encountering an unexpected small gap between the rows despite specifying a 0 gap and margin. Here is a screenshot for reference: .gallery { display: ...

htmlcss

Can you please provide instructions on how to expand the view in the title bar for a JavaScript/CSS/HTML UPW project?

Struggling to integrate the title bar in a UWP project using JavaScript/CSS/HTML and having trouble accessing the necessary APIs. Came across a custom helper class written in c++ in UWP samples on Github, but unable to reference it in my javascript code. H ...

javascriptcssuwp

The choice always seems to gravitate towards the initial option without any clear explanation

echo "<td>Language</td>"; echo "<td><select id='language' name='language'> <option value=''>Select...</option> <option value='en_US'>English(US)</o ...

phphtmloptional-parameters

The Challenge of Implementing Jquery in Internet Explorer

Having troubles with Jquery in IE, the code is not working. Can anyone assist me? Please check this on IE and FF (or opera, safari, chrome), select a state, and you'll notice that clubs load but do not appear in IE while they show up in FF. Your hel ...

jqueryhtmlajax

CSS animation is activated solely upon its initial creation

Exploring the world of Vuejs for the first time with my debut project. The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet: export default { name: 'example-component', ...

javascriptcssvue.jscss-animationsvuejs2

Is there a way to dynamically shift arrow key focus onto buttons in Angular using the left and right arrow keys?

I am facing an issue where pressing the arrow keys left and right does not focus or allow me to navigate through these buttons using the arrow keys. However, when checking the keycode values, they are printed according to the key pressed. I would like to k ...

htmlangulartypescriptrxjs

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...

javascripthtmlcssreactjs

Having trouble toggling the dropdown submenu feature in a Vuejs application?

.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial ...

javascripthtmlcssvue.js

Laravel issues with displaying data in a 'foreach' loop

I encountered a quirky issue while working with Laravel 5.2. I have a chunk of text that I'm attempting to display using some explode functions. The strange part is, Laravel is rendering it oddly by adding incorrect ':' before the end of the ...

phphtmllaravelforeachlaravel-5

Minimize all expanded containers in React

Although I've come across similar questions, none of them have addressed mine directly. I managed to create a collapsible div component that expands itself upon click. However, I am looking for a way to make it so that when one div is expanded, all o ...

javascripthtmlcssreactjs

Determine if the user's request to my website is made through a URL visit or a script src/link href request

Presently, I am working on developing a custom tool similar to Rawgit, as a backup in case Rawgit goes down. Below is the PHP code I have created: <?php $urlquery = $_SERVER['QUERY_STRING']; $fullurl = 'http://' . $_SERVER['SE ...

javascriptphpjqueryhtml

Tips on creating a resizable box that can move from left to bottom and also from right to top

Hey there, I'm currently working on developing my own catalog and I'm in the process of creating a selection tool to allow users to zoom in on a specific part of an image. If you're interested, you can check out the project here. However, I ...

javascriptjquerycss

What is the suitable condition necessary for optimal functionality?

Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue: $(document).ready(function() { $(".header").click(function() { if ($(".header-content"). ...

javascriptjqueryhtmlcss

What causes the button size to change in Bootstrap when switching to a spinner?

Every time I switch from a spinner back to a button, the button's size changes. I am struggling to identify the cause of this issue. function resizeButton() { var btn = document.getElementById('submitBtn'); btn.innerHTML = ' ...

javascripthtmlcssbuttonbootstrap-5