Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference!

This is what I have attempted so far: https://jsfiddle.net/1w9tv4ce/2/ My goal is to make all test-01 green, followed by test-02 black, then test-03 green, and finally test-04 black.

.rows-search div:nth-child(even) {
  background-color: #95CA44;
}

.rows-search div:nth-child(odd) {
  background-color: black;
}

.search-light-grey {
  color: darkgray;
}
<div class="container search-light-grey">
  <div class="rows-search">
    <div id="1">
      test-01
      <div>
        1
      </div>
      <div>
        <div>
          2a
        </div>
        <div>
          2b
        </div>
        <div>
          2c
        </div>
      </div>
    </div>
    <div id="2">test-02</div>
    <div id="3">test-03</div>
    <div id="4">test-04</div>
  </div>
</div>

Thank you for your help!

htmlcssbootstrap-4css-selectors

Answer №1

Employ the child combinator (>) within your selectors (this will exclusively target immediate child elements) - view the demonstration provided below:

.rows-search > div:nth-child(even) { /* <-- modified */
  background-color: #95CA44;
}

.rows-search > div:nth-child(odd) { /* <-- modified */
  background-color: black;
}

.search-light-grey {
  color: darkgray;
}
<div class="container search-light-grey">
  <div class="rows-search">
    <div id="1">
      test-01
      <div>
        1
      </div>
      <div>
        <div>
          2a
        </div>
        <div>
          2b
        </div>
        <div>
          2c
        </div>
      </div>
    </div>
    <div id="2">test-02</div>
    <div id="3">test-03</div>
    <div id="4">test-04</div>
  </div>
</div>

Answer №2

To follow up on my previous comment, make use of the > selector which targets direct children only.

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

.rows-search > div:nth-child(even) {
  background-color: #95CA44;
}

.rows-search > div:nth-child(odd) {
  background-color: black;
}

.search-light-grey {
  color: darkgray;
}
<div class="container search-light-grey">
  <div class="rows-search">
    <div id="1">
      test-01
      <div>
        1
      </div>
      <div>
        <div>
          2a
        </div>
        <div>
          2b
        </div>
        <div>
          2c
        </div>
      </div>
    </div>
    <div id="2">test-02</div>
    <div id="3">test-03</div>
    <div id="4">test-04</div>
  </div>
</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

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

I have successfully implemented server-sent events (HTML5) in my project without using node.js. It is a simple webpage (another JSP page) that makes a call and receives a response. However, when I receive the response, none of the methods/functions (onopen ...

htmljspserver-sent-events

Can you provide guidance on how to showcase the chat date and time for each message in a webchat created with the bot framework SDKV4 using C#

I've successfully created a chatBot using bot framework SDKV4 in C# with the WebChannel as the channel. Everything is functioning properly, but I have a specific goal in mind: For each message that the user types or the Bot replies to, I want a time ...

c#htmlcssbotframework

Webpack is failing to recognize certain CSS files

My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017. Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files with ...

csstypescriptwebpackvue.jscss-loader

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...

javascriptcssvue.jsvuetify.js

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: {'AAPL':['Apple Inc ...

pythonhtmlcssselenium

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

cssreactjsexpressmaterial-uiweb-development-server

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

Splitting a square into four triangles using CSS styling

My current challenge involves creating a square comprised of 4 triangles of equal size, each with hover events. Here is the CSS I'm using to create the triangles: .right, left, .top, .bottom { position: relative; width: 26px; } .right:before ...

htmlcsscss-shapes

The URL in $.mobile.changePage has not been updated

One of the challenges I encountered was switching between two pages - a menu list page and a menu detail page. The transition from the menu to the menu detail page was achieved using $.mobile.changePage. While everything seemed to be working correctly, the ...

jqueryhtmlcordovajquery-mobile

tips for positioning images and text in the center using css classes

Here's what I currently have: http://jsfiddle.net/nCs88/ Here's my goal: As a beginner, I am struggling to center the button images with the text. Any help would be greatly appreciated as this has been frustrating me for hours. ...

htmlcssimagetextblock

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...

javascriptjqueryhtmlcss

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

javascriptcssreactjsmaterial-uimakestyles

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Achieving the perfect overlay and centered image effect using CSS

I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly ap ...

htmlcsstwitter-bootstrap-3