Leveraging CSS selectors for selecting odd and even elements

Can anyone offer some insight into my CSS odd and even selector issue? I can't seem to figure out how the gmail-message-wrapper is being targeted in my code.

I want the 3 gmail-message-container elements to have alternating colors, but it's not working as expected. What am I doing wrong?

Check out the code here!

HTML:

<body style="width:400px;">
    <div>
        <div id="gmail-message-wrapper">
            <div id="gmail-message-container">
                <span class="trim-text"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7b4a8aaa2e9a2aaa6aeab87b4a8aaa2e9a3a8aaa6aea9">[email protected]</a> (Some Name)</span>:
                <br>
                <span class="trim-text"><b>Some title</b></span>
                <br>
                <span class="trim-text">Some summary text goes here</span>
            </div>
            <div id="gmail-message-container">
                <span class="trim-text"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3645595b5318535b575f5a7645595b531852595b575f58">[email protected]</a> (Some Name)</span>:
                <br>
                <span class="trim-text"><b>Some title</b></span>
                <br>
                <span class="trim-text">Some summary text goes here</span>
            </div>
            <div id="gmail-message-container">
                <span class="trim-text"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0774686a6229626a666e6b4774686a622963686a666e69">[email protected]</a> (Some Name)</span>:
                <br>
                <span class="trim-text"><b>Some title</b></span>
                <br>
                <span class="trim-text">Some summary text goes here</span>
            </div>
        </div>
    </div>
</body>

CSS:

#gmail-message-wrapper:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.5);
}
#gmail-message-wrapper:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.1);
}
css

Answer №1

It is recommended to use an ID only once within a page. Consider giving these DIVs a shared class and using separate IDs to target them.

Additionally:

Utilize the even and odd pseudo-selectors on the children (.gmail-message-container), rather than on the container itself (and assign it as a class, not an ID):

https://jsfiddle.net/yfjfwp5p/

Answer №2

.gmail-message-container:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.5);
}
.gmail-message-container:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.1);
}
<body style="width:400px;">
  <div>
    <div id="gmail-message-wrapper">
      <div class="gmail-message-container">
        <span class="trim-text"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4734282a2269222a262e2b0734282a226923282a262e29">[email protected]</a> (Some Name)</span>:
        <br>
        <span class="trim-text"><b>Some title</b></span>
        <br>
        <span class="trim-text">Some summary text goes here</span>
      </div>
      <div class="gmail-message-container">
        <span class="trim-text"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4635292b2368232b272f2a0635292b236822292b272f28">[email protected]</a> (Some Name)</span>:
        <br>
        <span class="trim-text"><b>Some title</b></span>
        <br>
        <span class="trim-text">Some summary text goes here</span>
      </div>
      <div class="gmail-message-container">
        <span class="trim-text"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2935373f743f373b33361a2935373f743e35373b3334">[email protected]</a> (Some Name)</span>:
        <br>
        <span class="trim-text"><b>Some title</b></span>
        <br>
        <span class="trim-text">Some summary text goes here</span>
      </div>
    </div>
  </div>
</body>

Explore the use of nth-child in CSS on w3school

Answer №3

The reason it functions is due to nth-child targeting the element's siblings; in this instance, it should be directed towards the container rather than the wrapper for selecting the message containers.

Does that align with your intention?

Answer №4

Here is a suggestion for you to try:

CSS Code:-

#email-container:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.5);
}
#email-container:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.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

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

javascriptjquerycssdrop-down-menu

"Menu bar showcasing various products and services in the

Is there a way to design a menu similar to the one on this website using bootstrap 4? https://i.sstatic.net/2wkck.jpg The menu layout features categories on the sidebar and collapses in mobile view. How can I achieve this with bootstrap 4? ...

htmlcssbootstrap-4

The CSS zigzag border functionality seems to be malfunctioning on Internet Explorer

On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it ...

cssinternet-explorer

Guide to aligning a div element along the right edge of the webpage

I'm struggling to align this div all the way to the right side of the screen. Below is the HTML: <html> <head> title></title> <link rel="stylesheet" type="text/css" href="../css/style.css"/> </head> <h1&g ...

htmlcss

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

One issue that arises when using TextareaAutosize from MUI is the need to click on the textarea again after entering each character. This problem specifically occurs when utilizing StyledTextarea = styled(TextareaAutosize) The initial code snippet accompl ...

javascriptcssreactjsmaterial-uistyled-components

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

javascriptcssangularjsng-gridangular-ui-grid

What could be causing the unresponsive hamburger button on my navbar?

As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Lo ...

htmlcssflask

Progress Circles on Canvas in FireFox

Currently, I am experimenting with this codepen demo that utilizes canvas to generate progress circles: The functionality functions perfectly in Chrome and Safari; however, it only displays black circles in FireFox. My knowledge of canvas is limited, so I ...

javascripthtmlcsscanvas

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

htmlcssbootstrap-4

How can images be resized in relation to the window size while maintaining specific pixel margins?

I'm looking to achieve a centered image on the screen that stretches horizontally while maintaining set margins of 200px on each side. It's important that the image scales proportionally and remains centered regardless of the window size. Althou ...

htmlcssimageresizemargins

The fixed positioning isn't functioning properly, here is the code snippet from my CSS and HTML

CSS Code I am not associated with any element that has the CSS property overflow: hidden. <div class="header"> <section class="top"> <div class="links"> &l ...

htmlcsscss-position

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

jqueryhtmlanimationcssjquery-animate

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

css

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

htmlcss

Steps for implementing an <h1> element with the React Material UI theme

I have chosen the 'dark' theme and would like to apply it to an h1 element. How can I achieve this? The method below does not yield the desired result: <MuiThemeProvider theme={theme}> <h1>Page Title</h1> ... The following ...

htmlcssreactjsmaterial-ui

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

javascripthtmlcssvue.js

The styling of Material UI (MUI) buttons is not displaying correctly

Why are my MUI button components displaying differently than the documentation? I have not made any external .css file or theme changes except for the ones listed. I have also installed the Roboto font and configured the typography. I want any changes I ma ...

javascriptcssreactjsmaterial-ui

How can one ascertain the dimensions of the video margins within an embed-responsive video container?

I am in search of a solution to extract information from within the embed responsive element. When it comes to embed-responsive video elements, they automatically include internal margins on either the x or y axis to maintain the aspect ratio of the video ...

htmlcssbootstrap-4

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

javascripthtmlcss

What is the reason the text does not have a border around it?

The border is supposed to be around the text, but it isn't showing up. Where did I go wrong? Could it be that I need to set a position? html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; marg ...

htmlcss