Can you customize the background color for the entire section where the first child appears in a nested collapsible list with CSS?

In my current setup, I have a nested list within a larger container box. Each ul element has a border-top style applied, while each li element has a border-bottom and padding. The HTML code looks like this:

    <div class="menu">
    <ul>
      <li class="collapsible active">
        <i class="fas"></i><a href="#"> Item 1 </a>
        <ul class="collapsible__content">
          <li>
            <a href="#"> Item 2 </a>
          </li>
          <li><a href="#"> Item 3 </a></li>
        </ul>
      </li>
    </ul>
  </div>

The corresponding CSS styles are defined as follows:

.menu {
  background: var(--color-primary);
  color: #cfc6dc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu a {
  color: inherit;
  text-decoration: none;
}

.menu ul {
  border-top: 1px solid #61676b;
  list-style: none;
  padding-left: 0;
}

.menu li {
  border-bottom: 1px solid #61676b;
  padding: 1.5rem;
}

.menu .collapsible__content {
  font-size: 1.4rem;
  position: relative;
  top: 1rem;
  padding-left: 2rem;
}
...

The challenge I'm facing is to have a different background color for the active container li element (Item 1) and its block, without affecting the nested li elements when expanded. Additionally, I want the other elements to have a different background color when hovered over. I've attempted to adjust the background color of the "collapsible__content" class and modify it on hover, but the outer margin persists. Can this be achieved with CSS, or should I consider using JavaScript?

javascripthtmlcss

Answer №1

I believe I have found the solution you are seeking, particularly utilizing the > css operator to target only the first level of children.

I have also included an example of the :first-child selector in case it aligns more with your requirements.

To address the second query, you can pinpoint it within the collapsible__content class.

.menu {
  background: #dddddd;
  color: #cfc6dc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu a {
  color: inherit;
  text-decoration: none;
}

.menu ul {
  border-top: 1px solid #61676b;
  list-style: none;
  padding-left: 0;
}

.menu li {
  border-bottom: 1px solid #61676b;
  padding: 1.5rem;
}

.menu .collapsible__content {
  font-size: 1.4rem;
  position: relative;
  top: 1rem;
  padding-left: 2rem;
}

.menu .fas {
  margin-right: 1rem;
  width: 2rem;
  text-align: center;
}

.menu .collapsible__content {
  background-color: #000;
}

.menu .collapsible__content li {
  background-color: #333;
  color: #cfc6dc;
}

.menu > ul > li:hover,
.menu > ul > li.active {
  background: #bbbbbb;
  color: #fff;
  transition: color 0.3s;
}

.collapsed { display: none; }
<div class="menu">
  <ul>
    <li class="collapsible active">
      <i class="fas"></i><a href="#"> Item 1 </a>
      <ul class="collapsible__content">
        <li>
          <a href="#"> Item 1.2 </a>
        </li>
        <li>
          <a href="#"> Item 1.3 </a>
        </li>
      </ul>
    </li>
    <li class="collapsible">
      <i class="fas"></i><a href="#"> Item 2 </a>
      <ul class="collapsible__content collapsed">
        <li>
          <a href="#"> Item 2.2 </a>
        </li>
        <li>
          <a href="#"> Item 2.3 </a>
        </li>
      </ul>
    </li>
    <li class="collapsible">
      <i class="fas"></i><a href="#"> Item 3 </a>
      <ul class="collapsible__content">
        <li>
          <a href="#"> Item 3.2 </a>
        </li>
        <li>
          <a href="#"> Item 3.3 </a>
        </li>
      </ul>
    </li>
  </ul>
</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

Discover the best practices for implementing MongoDB's latest Schema Validation functionality within your Express.js application

Need help implementing MongoDB's Schema Validation in an Express server? While working on a simple todo app, I opted for the native MongoClient over mongoose but still require a schema for my data. According to MongoDB's documentation available ...

javascriptnode.jsmongodbexpress

What is causing my function to execute twice in all of my components?

One issue I am facing is that I have created three different components with routing. However, when I open these components, they seem to loop twice every time. What could be causing this behavior and how can I resolve it? For instance, in one of the comp ...

htmlangulartypescript

What is the best way to incorporate Blade code into a React component within a Blade view file?

Recently, I've been working on a Laravel view named homepage.blade.php, which includes the following code: <body> <div id=root></div> <script src="./js/app.js"></script> </body> In the app.js file: ...

phphtmlreactjslaravellaravel-blade

When the form is submitted, use jQuery to smoothly transition the page to a specific

I have a form and a div called "success". When the form is submitted, the "success" div is displayed. I am attempting to make it so that when the form is submitted, the page slides to the "success" div. Here is the code I am using: $.ajax({ type: "P ...

javascriptjqueryhtmlajax

What is the method for creating a JavaScript array that closely resembles the provided example?

My task is to create an addRows method using specific data structure as shown below. data.addRows([ ['UK', 10700,100], ['USA', -15400,1] ]); However, the data I have available is in a different format. How can I transform ...

javascriptjquerygoogle-maps

Enhance <th> elements using CSS classes

I'm encountering some issues with HTML tables. The layout of my table is as follows: <table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-remove">&nbsp;</th> <th clas ...

htmlcss

Place content following a three.js display created within a <div id="mainWindow">

Recently, I created a small Three.js animation and embedded it in my HTML page like this: <div id="mainWindow" class="popup_block"> <!-- JavaScript for simulation --> <script src="../temp/webgl-debug.js"></script> <scri ...

javascripthtmlcssthree.js

The box inside a MUI TextField input is consistently visible

My form utilizes MUI Form within a Dialog, but I am facing an issue where the TextField always displays with the border of a filled variant instead of the standard look. Additionally, when trying to integrate an Input from the NextUi library, I encountered ...

cssreactjsformsmaterial-uifrontend

Which is more advantageous: returning a value or returning a local variable?

While the title may not be the best descriptor in this situation, I am unsure of how to phrase it any better. Both of these functions perform the same task: function A(a, b) { return a * b; } function B(a, b) { var c = a * b; return c; ...

javascriptoptimization

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

jquerycss

Exploring the power of ElasticSearch alongside Mysql

As I plan the development of my next app, I am faced with the decision between using NoSQL or a Relational Database. This app will be built using ReactJS and ExpressJS. The data structure includes relational elements like videos with tags and users who li ...

javascriptmysqlnode.jselasticsearch

Troubleshooting issue: Bootstrap button onclick function not firing

My node express app is using EJS for templating. Within the app, there is a button: <button type="button" class="btn btn-success" onclick="exportWithObjectId('<%= user.id %>')">Export to csv</button> Accompanying the button i ...

javascriptnode.jstwitter-bootstrapejs

There seems to be a complete absence of rendering in this particular vue

Upon initializing a fresh Vue project using Vue CLI 3 and removing all default views and components, I proceeded to add two new views. To my surprise, these views did not render when changing the URL; instead, I was met with a blank page and no error messa ...

javascriptvue.jsvuejs2vue-router

Replace the bullet icon with a double quote symbol

My HTML List needs a different look - I want to change the bullet icon into a double quote icon. A website that I found interesting is this one. Here's the CSS code I have: .listStyle li:before { list-style: none; content: "\00BB"; } < ...

htmlcsshtml-listspseudo-element

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml

Combining Two DIVS Side by Side

Hey there, I am working on a timeline using two divs within a table cell. My goal is to have these divs overlap instead of appearing one below the other. The position attribute for all the DIVs inside the cell must remain unchanged due to the drag/drop fu ...

javascriptjqueryhtml

Adding custom CSS and JavaScript to the TYPO3 backend: A step-by-step guide

Is there a way to incorporate css and javascript files into the backend? I'm aiming to enhance custom created content elements with these files, making them more visually appealing for users. Platform: TYPO3 v9 Method: Composer Mode Purpose: Cu ...

javascriptphpcsstypo3element

Discovering vacation days in the Persian calendar (Shamsi)

How can I access Persian calendar holidays in React without using paid APIs? Is there a free way to get information about Persian (shamsi) holidays, including descriptions? { 1402:[ { date: "1402/1/2", description: "عیدن ...

javascriptreactjscalendar

Guide on utilizing the reduce method with objects

I am attempting to use the reduce method on an object to create an HTML list const dropdownTemplate = (data) => { console.log(data); // no data displayed return ` <li class="dropdown__item" data-value="${data.value}"><span class="dropdown__i ...

javascriptobjectreduce

Inject data from ajax into the body of the html document

Is it possible to retrieve values from an ajax call and insert them into the body of an HTML document? Here is an example: function check() { $.ajax({ url : '/check', datatype : 'json', async ...

javascriptjqueryhtmlajax