Apply unique colors to each accordion title in CSS

I am working with a bootstrap accordion and I want to customize the color of the h4 titles for the elements within the DOM. My goal is to have distinct colors for the first 4 elements, then repeat those colors.

.my-platform-title:nth-child(2n+1) {
    color: #1a9e49;
}
.my-platform-title:nth-child(2n) {
    color: #7bc9c8 !important;
}
.my-platform-title:nth-child(3n) {
    color: #fd8d6e !important;
}
.my-platform-title:nth-child(4n) {
    color: #bf6da6 !important;
}
<div class="panel-heading my-panel-heading" role="tab" id="platform1">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse1" aria-expanded="false" aria-controls="platform-collapse1">
            <span class="fa fa-plus-square-o text-success"></span> Platform 1
        </a>
    </h4>
</div>
<div class="panel-heading my-panel-heading" role="tab" id="platform<2">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse<2" aria-expanded="false" aria-controls="platform-collapse<2">
            <span class="fa fa-plus-square-o text-success"></span> Platform 2
        </a>
    </h4>
</div>
<div class="panel-heading my-panel-heading" role="tab" id="platform3">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse3" aria-expanded="false" aria-controls="platform-collapse3">
            <span class="fa fa-plus-square-o text-success"></span> Platform 3
        </a>
    </h4>
</div>
<div class="panel-heading my-panel-heading" role="tab" id="platform4">
    <h4 class="panel-title my-platform-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse4" aria-expanded="false" aria-controls="platform-collapse4">
            <span class="fa fa-plus-square-o text-success"></span> Platform 4
        </a>
    </h4>
</div>

The issue I'm encountering is that only the first color rule is being applied, while the others are being ignored.

htmlcsstwitter-bootstrap

Answer №1

Initially, your selectors seem to be incorrect. Although they may work in this specific scenario, it's important to note that 2n+1 refers to every odd child, 3n signifies every third child, and so forth.

It would be more appropriate to use simple numeric values like :nth-child(1) - for selecting the first child,...

If this method doesn't yield the desired results, you can opt for a more user-friendly approach by creating custom classes for different colors, as illustrated below:

.color-green {
    color: #1a9e49;
}

.color-turquoise {
    color: #7bc9c8 !important;
}

.color-orange {
    color: #fd8d6e !important;
}

.color-purple {
    color: #bf6da6 !important;
}
<h4 class="panel-title my-panel-title my-platform-title color-green">Title 1</h4>
<h4 class="panel-title my-panel-title my-platform-title color-turquoise">Title 2</h4>
<h4 class="panel-title my-panel-title my-platform-title color-orange">Title 3</h4>
<h4 class="panel-title my-panel-title my-platform-title color-purple">Title 4</h4>

Answer №2

nth-child functions as a selector for elements within their parent - in this case, h4.my-platform-title will always be the first child of the div.

To address this issue, you should apply the nth-child to the parent div (assuming they are the only children - as shown below with a container around your headings).

In addition, make sure to style the anchor tag instead of the h4 element.

.panel-heading:nth-child(1n) .my-platform-title a {
  color: #1a9e49;
}
.panel-heading:nth-child(2n) .my-platform-title a {
  color: #7bc9c8;
}
.panel-heading:nth-child(3n) .my-platform-title a {
  color: #fd8d6e;
}
.panel-heading:nth-child(4n) .my-platform-title a {
  color: #bf6da6;
}
<div class="container">
  <div class="panel-heading my-panel-heading" role="tab" id="platform1">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse1" aria-expanded="false" aria-controls="platform-collapse1">
            <span class="fa fa-plus-square-o text-success"></span> Platform 1
        </a>
    </h4>
  </div>
  <div class="panel-heading my-panel-heading" role="tab" id="platform2">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse2" aria-expanded="false" aria-controls="platform-collapse2">
            <span class="fa fa-plus-square-o text-success"></span> Platform 2
        </a>
    </h4>
  </div>
  <div class="panel-heading my-panel-heading" role="tab" id="platform3">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse3" aria-expanded="false" aria-controls="platform-collapse3">
            <span class="fa fa-plus-square-o text-success"></span> Platform 3
        </a>
    </h4>
  </div>
  <div class="panel-heading my-panel-heading" role="tab" id="platform4">
    <h4 class="panel-title my-panel-title my-platform-title">
        <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse4" aria-expanded="false" aria-controls="platform-collapse4">
            <span class="fa fa-plus-square-o text-success"></span> Platform 4
        </a>
    </h4>
  </div>
</div>

Answer №3

To enhance differentiation among headers, I propose creating unique additional classes for each header and then customizing the styles of each class separately. Here's an example:

<h4 class="panel-title my-panel-title my-platform-title my-platform-title-1">Title 1</h4>
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-2">Title 2</h4>
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-3">Title 3</h4>
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-4">Title 4</h4>

Answer №4

If you're looking to customize the colors of your links instead of the titles themselves, you can do so by targeting specific child elements:

.custom-panel-heading:nth-child(1) a {
    color: #1a9e49;
}
.custom-panel-heading:nth-child(2) a {
    color: #7bc9c8;
}
.custom-panel-heading:nth-child(3) a {
    color: #fd8d6e;
}
.custom-panel-heading:nth-child(4) a {
    color: #bf6da6;
}

Check out the Fiddle for a demo: https://jsfiddle.net/4jc7vr9r/1/

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

"JavaScript issue: receiving 'undefined' when trying to retrieve input

This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...

javascripthtmlcss

What is the best way to add an element when a checkbox is selected and delete it when it is dese

How can I display the text of selected elements and remove them when unchecked from a list of orders? When an element is checked, its value is added to the sum and its text is displayed. If it is unchecked, its text should be removed. Click here for the co ...

jqueryhtml

Having some success with AngularJs autocomplete feature

Currently working on a small search application that utilizes Elasticsearch and AngularJS. I have made progress in implementing autocomplete functionality using the AngularJS Bootstrap typeahead feature. However, I am encountering difficulties in displayin ...

javascriptangularjstwitter-bootstrap

The functionality of the jQuery program is compromised when used on the Google Chrome browser

I just recently started diving into the world of Jquery, attempting to learn it from scratch. However, I have encountered an issue while trying to make my Jquery program run smoothly: Let's take a look at the CSS first: p { opacity: 0; } Now on ...

jqueryhtmlgoogle-chrome

Why is the toggle list not functioning properly following the JSON data load?

I attempted to create a color system management, but as a beginner, I find it quite challenging! My issue is: When I load my HTML page, everything works fine. However, when I click on the "li" element to load JSON, all my toggle elements stop working!!! ...

javascriptjqueryhtmlcssjson

Issue encountered in SQL PHP form script at line 23

I'm currently working on some code to insert data into different tables, but there seems to be an issue on line 23. This code is part of a college project registration form. <?php $con = mysql_connect(","",""); if (!$con) { die('Could not c ...

phphtmlsql

What are some strategies for efficiently displaying a large amount of data on a screen using Javascript and HTML without sacrificing performance?

Imagine having a hefty 520 page book with over 6,200 lines of text ranging from 5 to 300 characters each. The challenge lies in efficiently displaying this content on the screen for users to read without causing lag or performance issues. Attempting to re ...

javascripthtmlcssreactjscanvas

What steps can I take to prevent BeautifulSoup from interpreting commas as tab characters?

My recent project involved creating a web scraping code to extract information from a local news website. However, I have encountered two issues with the current code. One problem is that when the code retrieves paragraph data and saves it to a CSV file ...

pythonhtmlcsvweb-scrapingbeautifulsoup

What steps should I take to design a mobile-friendly navigation bar?

I have shared the code for my navigation bar in a previous post Fixing Nav Bar to top of page. Now, I want to create a mobile version of it, but I am new to designing for mobile devices. Based on feedback and some CSS tweaking, I have managed to make it wo ...

htmlcss

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

javascriptjqueryhtmlajaxjson

`Hovering over a div triggers a continuous animation loop`

I've gone through various questions and solutions related to this issue, but unfortunately, none of them seem to work for me. It's possible that I might be overlooking something or my scenario is slightly unique. The main problem I'm facing ...

javascriptjqueryhtmlanimation

Angular displaying a slice of the data array

After following the example mentioned here, and successfully receiving API data, I am facing an issue where only one field from the data array is displayed in the TypeScript component's HTML element. Below is the content of todo.component.ts file im ...

javascripthtmlangulartypescriptasp.net-web-api

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Align the middle row using CSS Grids

I am working on creating a grid layout with a size of 4x3, and I would like the second row to be centered as the top row contains four elements. Here is an example of what I am trying to achieve: https://i.sstatic.net/FnN7s.png Check out the demo code b ...

htmlcsscss-grid

Tips for creating a centered Reindeer

My reindeer code seems to be a bit off-center. Even though I followed a tutorial, my reindeer is not aligning properly as shown in the tutorial. Here is all the CSS code for the reindeer: .reindeer { height: 510px; width: 350px; position: ab ...

htmlcss

Display additional content button, dynamic div identification

I've created a small script that includes a "show more" button at the end of displaying 10 entries. Here is the code: <div id="more<?=$lastid;?>"> <a onclick="showmore(<?=$lastid;?>);">More</a> </div> And here ...

phpjavascriptajaxhtml

problem specifically occurring on tablets with fixed positioning

Have you checked out the site I'm referring to here? An unusual issue seems to be occurring specifically on tablets. We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all de ...

jqueryioscssipadtablet

What is the best way to ensure that my Material UI container occupies the entire width and height of the

Struggling to fit my content within a Material UI container in a React project, but it's creating odd margins. Check out the current look: https://i.stack.imgur.com/TaQs2.png Here's how I want it to display with full width: https://i.stack.imgur ...

cssreactjsmaterial-ui

Tips for storing checkbox preferences in a user account on an HTML/PHP website

Hello! I am currently working on a website. I have included a checkbox that updates the option selected in phpMyAdmin. The issue I am facing is that when I press submit and then refresh the page using F5, the preference I chose disappears on the client s ...

phphtmlcheckboxphpmyadmin

The standard color code applied to an HTML button

I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...

htmlcss