Switch up background colors for different Div Labels

Question

Switch up background colors for different Div Labels

I have a unique structure resembling a table using div elements.

My goal is to alternate the background color of only the divLabels.

Each "table row" consists of a divLabel and a divData component.

Here is my attempt so far:

However, I am facing an issue where the labels do not alternate in color as expected. Instead, they display the same color for odd rows only:

.About_RowLabel:nth-of-type(odd) {
    background-color: #DEF3CA;
}

If anyone could provide insight into why this does not work with my div elements, it would be greatly appreciated.

html css

Answer 1

Answer №1

Ensure you are targeting the correct elements: move up a level to their parent elements and begin your selection from there, for example using

.someParentClass:nth-of-type(even) .child{}

: see demo

.About_Row {
  height: 2em;
  width: 500px;
}
.About_RowLabel {
  width: 98px;
  color: black;
  float: left;
  background-color: #71cd7b;
}
.About_RowData {
  width: 200px;
  float: left;
  margin-left: 20px;
}
.About_Row:nth-of-type(odd) .About_RowLabel {
  background-color: #DEF3CA;
}
.serv_resize {
  border: 1px solid #E2E2E2;
  color: #444;
  width: 425px;
  float: left;
  margin: 10px 10px 10px 0;
  padding: 5px;
  height: 239px;
}

<div id="you" class="serv_resize">
  <div class="About_Row">
    <div class="About_RowLabel">
      BirthDate:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblDoB" runat="server" Text="DoB"></asp:Label>
    </div>
  </div>
  <div class="About_Row">
    <div class="About_RowLabel">
      As of:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblAsOf" runat="server" Text="Dt"></asp:Label>
    </div>
  </div>
  <div class="About_Row">
    <div class="About_RowLabel">
      Phone:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblPhone" runat="server" Text="Ph"></asp:Label>
    </div>
  </div>
</div>

Answer 2

Ensure you are targeting the correct elements: move up a level to their parent elements and begin your selection from there, for example using

.someParentClass:nth-of-type(even) .child{}

: see demo

.About_Row {
  height: 2em;
  width: 500px;
}
.About_RowLabel {
  width: 98px;
  color: black;
  float: left;
  background-color: #71cd7b;
}
.About_RowData {
  width: 200px;
  float: left;
  margin-left: 20px;
}
.About_Row:nth-of-type(odd) .About_RowLabel {
  background-color: #DEF3CA;
}
.serv_resize {
  border: 1px solid #E2E2E2;
  color: #444;
  width: 425px;
  float: left;
  margin: 10px 10px 10px 0;
  padding: 5px;
  height: 239px;
}

<div id="you" class="serv_resize">
  <div class="About_Row">
    <div class="About_RowLabel">
      BirthDate:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblDoB" runat="server" Text="DoB"></asp:Label>
    </div>
  </div>
  <div class="About_Row">
    <div class="About_RowLabel">
      As of:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblAsOf" runat="server" Text="Dt"></asp:Label>
    </div>
  </div>
  <div class="About_Row">
    <div class="About_RowLabel">
      Phone:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblPhone" runat="server" Text="Ph"></asp:Label>
    </div>
  </div>
</div>

Answer 3

Answer №2

The pseudo selectors for nth- all function with sibling elements, meaning they target elements that have the same immediate parent.

Since all your elements with class .About_RowLabel are the first in their parent element (the .About_Row element), they are all considered odd.

Focus on styling alternating parent elements with the following code:

.About_Row:nth-of-type(odd) .About_RowLabel {
    background-color: #DEF3CA;
}

View the demonstration at http://jsfiddle.net/o5dv4qkc/4/

Answer 4

The pseudo selectors for nth- all function with sibling elements, meaning they target elements that have the same immediate parent.

Since all your elements with class .About_RowLabel are the first in their parent element (the .About_Row element), they are all considered odd.

Focus on styling alternating parent elements with the following code:

.About_Row:nth-of-type(odd) .About_RowLabel {
    background-color: #DEF3CA;
}

View the demonstration at http://jsfiddle.net/o5dv4qkc/4/

Switch up background colors for different Div Labels

Answer №1

Answer №2

Similar questions

Is it possible to conceal JavaScript comments on a page before it is displayed?

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

Use jQuery to achieve smooth scrolling when clicking on a link that points to a specific #div, maintaining the URL

Crushing jQuery's Sortable/Droppable

PHP consistently selects the final radio button element

Can this be achieved using CSS alone, without needing JavaScript?

Exploring the file attributes within nw.js

A workaround for background-size in Internet Explorer 7

Increase the div id using jQuery

Updating URL links with PHP and DOM manipulation

The app is opening the index.html file instead of the expected index.jsx file

When using angular's ngHide directive on a button, it will still occupy space in the

Can someone guide me on the process of assigning multiple classes in my situation?

:host-selector for Angular Material dialog

Styling errors with jQuery validation

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

What could be causing my tabs to shift to the vertical side when using large, larger, and wide screens?

What is the best way to retrieve the class name of a div element that comes before with jquery?

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

Ways to stop a tag from causing disruption to the alignment of another