Creating individual background colors for each nested child element is achievable by using CSS selectors and the nth

I want to create a reddit comment layout similar to this:

<div>
  <div class="comment" style="background: white;">
    <div class="comment" style="background: grey;"></div>
    <div class="comment" style="background: grey;">
      <div class="comment" style="background: white;">
        <div class="comment" style="background: grey;"></div>
      </div>
    </div>
  <div class="comment" style="background: white;"></div>
</div>

It's how my html code generated by Rails currently looks:

<div class="comment_main-list">
  <div class="comment_list">
    <div class="comment">blabla</div>
    <div class="comment_main-list">
       <div class="comment_list">
         <div class="comment">answer to blabla</div>
       </div>
    </div>
  </div>
  <div class="comment_list">...</div>
</div>

I tried using Sass loops for the styling, but I'm unable to predict the number of comments in advance. Nth-child or nth-type selectors didn't give me the desired outcome either.

Any ideas on how I can achieve this layout?

Thank you

htmlcsssass

Answer №1

<div>
  <div class="comment" style="background: white;">
    <div class="comment" style="background: grey;"></div>
    <div class="comment" style="background: grey;">
      <div class="comment" style="background: white;">
        <div class="comment" style="background: grey;"></div>
      </div>
    </div>
  <div class="comment" style="background: white;"></div>
</div>

When it comes to styling with CSS:

 div:nth-child(1) {
      background: red;
 }
 div:nth-child(2) {
      background: blue;
 }

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

What is the best way to include icons in a list item on the left, center, and right side?

I'm in the process of developing an Ionic app that integrates with the Spotify API. One feature I want to include is a widget that displays three icons in a list item: the left icon for the last song, the center icon for play/pause functionality, and ...

javascripthtmlcssangularjsionic-framework

Using AJAX to query a database and updating a div tag with the submitted form entries

I need assistance in setting up a webpage with an AJAX form. The idea is that upon submission, the form's values will be used to search and query a database for results, which will then be displayed in the same DIV as the form. Any guidance or help o ...

phpjavascriptmysqlhtmlajax

Utilizing Beautiful Soup in Python to Scrape HTML Data from a Search Engine Results Page

I'm attempting to extract hotel information from booking.com using Beautiful Soup. I am specifically looking for certain details from all the accommodations in Spain. Here is the search URL: URL Upon inspecting an accommodation on the result page us ...

pythonhtmlweb-scrapingbeautifulsoup

Is it possible to adjust table rows to match the height of the tallest row in the table?

I've been attempting to ensure that all table rows have the same height as the tallest element, without using a fixed value. Setting the height to auto results in each row having different heights, and specifying a fixed value is not ideal because the ...

javascripthtmljquerycsshtml-table

The sliding content in the div below the one above it

Currently working on creating my portfolio website, and I have implemented a very dynamic parallax homepage with multiple layers. My goal is to enable one-page scrolling by using vh units. However, I encountered an issue where the div containing the abou ...

htmlcssparallaxresponsive

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Combining four numbers to calculate a total with the click of a button

I am currently attempting to calculate the sum of 4 entries in 4 separate text fields, and everything appears to be working correctly except that when I click the button, the sum is not being set. For example, if I enter the number 1 in each text input, th ...

javascripthtml

Customizing the design in Sencha with SCSS using the "$base-color" variable

UPDATE : It is crucial that this function properly, so before responding, please take a moment to review any previous comments on the question as your concern may have already been addressed. I am attempting to modify the foundational variables of Sencha ...

cssextjssencha-touchsencha-touch-2sass

How can I show information on the same page as a link by simply clicking on it?

My goal is to create a functionality where clicking on a link will display specific information. Currently, all the links and their corresponding information are displayed at once. I want to change this so that the links are displayed first, and the inform ...

javascriptjqueryhtml

I'm unable to successfully include a download link for a PDF file stored locally

Looking to provide a download link for my resume on my website. Here's the code I'm using: <a href="My Resume.pdf" class='download' download="Resume PDF">Download CV</a> Despite using what I believe to ...

htmlangulardownloadhref

How about incorporating a loading animation for form submission?

While my code is running some calculations, I want the submit button to change from the current "RUN" state to a loading gif that I have. Clicking the RUN button should trigger a specific script to run and calculate various data, returning the results to t ...

javascriptjqueryhtmlajax

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

htmlcssangularprimengfieldset

Achieving perfect alignment in a CSS grid for form elements vertically

One of my current projects involves creating a form layout using HTML and CSS that follows a Material Design style: <div class="form-group"> <input type="text" id="feedName" name="name" value={nameValue} onChange={this.handl ...

htmlcsscenteringcss-grid

Do we always need to use eval() when parsing JSON objects?

<!DOCTYPE html> <html> <body> <h2>Creating a JSON Object in JavaScript</h2> <p> Name: <span id="jname"></span><br /> Evaluated Name: <span id="evalname"></span><br /> <p> <s ...

javascripthtmljsoneval

A tutorial on how to showcase choices in a collection_select using the Rails controller

When a user selects a specific designation, the corresponding benefits should be loaded in a dropdown menu. I have implemented this functionality using an ajax call. HTML: <label>Designations</label> <%= f.association :designation, input_h ...

htmlruby-on-railsajax

Looping through jQuery click() function

I used a loop to generate div elements and I am trying to modify the background-color when the div is clicked. var c = $("#container")[0]; for(var i=0; i<6; i++){ var x = document.createElement("div"); x.className = "sqare"; x.click(changecolor(t ...

javascriptjqueryhtml

What is the best way to create a recurring design in a CSS grid?

Looking to create a unique CSS grid layout with a specific pattern: Display 4 elements in a row, then display 2 in a row, followed by 12 (as 4 in a row), and finally 2 more elements in a row. After that, the whole pattern repeats. Here is an image of the ...

csscss-grid

Deactivate Pagination with a Button-Based Approach

After conducting thorough research online, I have experimented with various approaches but unfortunately, none have proven successful. view image description here I am seeking guidance on how to disable pagination when clicking on the replace button. Due ...

htmlcssangularjs

Processing file to retrieve information (JavaScript)

As someone who is new to the world of JavaScript and website development, please forgive me if this question seems a bit basic. The concept is to have a popup message appear on every page with some information. The issue arises when wanting to change this ...

javascripthtmlajax

jQuery .html() function malfunctioning

I am just starting out with front-end development and have taken on the challenge of creating a simple Tic Tac Toe game using HTML5. To set up the game board, I decided to use a table element in my code. Below is the snippet of HTML that I have implemented ...

javascriptjqueryhtmlweb-applicationsfrontend