Troubleshooting: Why are :nth-child() and :nth-of-type() functions malfunction

Even after simplifying my code significantly, I am still facing issues with it not working as expected. The :nth-child selector seems to work fine on the w3schools interactive coding page, ruling out any computer-related problems.

.postPrevWrap:nth-child(odd) {
  background: red;
}
<div class="postPrevWrap">
  <div class="postPrev">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="postPrev">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

https://codepen.io/anon/pen/dQzYwj

Could someone please point out what I might be doing incorrectly?

htmlcsscss-selectors

Answer №1

:nth-child is best used on the child element directly, rather than the parent wrapper:

For example, avoid writing it like this:

.postPrevWrap:nth-child(odd)

Instead, write it like this:

.postPrev:nth-child(odd)

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

JavaScript accordions failing to open

I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...

javascripthtmlcssaccordion

A series of divs continuously scrolling in succession with a stationary title/header

My web page contains multiple div sections, each with its own content. I need the page to load initially with all sections visible. Then, I want the page to auto-scroll so that the header of the first section remains fixed while its contents scroll. Once t ...

javascriptjqueryhtmlcss

obtain an inner element within a container using the class name in a div

I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...

javascripthtml

The Selenium Webdriver's isSelected() method in Chrome browser does not return true for radio buttons

I have been attempting to confirm whether my radio button is selected or not, but I keep receiving a false value even after selecting the radio button. Here is the HTML code: <div class="controls tss-radio-text-format"> <label class= ...

javahtmlselenium-webdriver

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

I'm currently using a simple jQuery script to switch between two thumbnails when hovering over a div. The code works perfectly for the .thumbs class, but I also want this functionality to work with the post titles. Unfortunately, adding the .headline ...

javascriptjqueryhtmlwordpresshover

adjusting the font color based on the currently selected tab

After seeking help for my previous question on Unable to add a background colour to the button in navigation I have successfully resolved that issue and continued working, but now I am facing a new challenge. I need to change the font color of the navigat ...

javascripthtmlcss

Troubles with Bootstrap's navbar dropdown menu functionality

I seem to be encountering a problem with the dropdown list in my navigation bar. It was functioning correctly yesterday, but something seems to have gone awry as Bootstrap is no longer working for the dropdowns only. I'm puzzled as to why this sudden ...

htmlcss

What is the reason for Python Flask to consume both instances of a file when using .decode()?

In my program, I am fetching a CSV file from an HTML form and decoding it using utf-8. However, I need to have two instances of this file for different purposes. The issue arises when I use .decode('utf-8'), as both instances end up being consume ...

pythonhtmlflask

Customize your Bootstrap hamburger menu with a unique open and close button design

Currently, I am in the process of creating a hamburger menu with Bootstrap and I have managed to customize the open and close buttons according to my preferences. However, I am facing an issue where the hamburger icon is not displaying properly. See the c ...

htmlcsstwitter-bootstrap

PHP form script failing to process

I am experiencing an issue where my form keeps redirecting back to the main contact page without processing, even though the submit button was pressed and $_POST['contactsent'] is set to "yes". This indicates that the form should be processing. ...

phphtmlforms

Achieving an IE7 opacity background while keeping the text unaffected

This is the given HTML code structure (view in JS Fiddle) How can I adjust the background color to be 20% opaque white while keeping the text black? It needs to be compatible with IE7. <ul class="menu"> <li class="first expanded active-trail ...

cssopacityinternet-explorer-7

Tips for maintaining an open sub menu while hovering over a link

I'm currently working on a navigation menu using jQuery that includes categories, subcategories, and their subsequent subcategories. However, I am facing some issues with it not functioning as intended. To avoid cluttering this space with excessive HT ...

jquerycssdrop-down-menu

Can you tell me how to implement a shopping basket in vue.js that only appears when an item has been added to it?

After numerous attempts, I often find myself clearing everything and starting from scratch. How can I make this work? Observing and learning from others will greatly assist me! This area is designated for shopping cart items. If it's empty, nothing ...

javascripthtmlvue.js

Limiting the movement of an HTML range slider within a specific range

Currently, I have a range slider that goes from 0 to 100, with the current value set at the maximum of 100. My goal is to set a limit of 50, so that the slider can only be moved between 50 and 100, and not from 0 to 50. I've created a jQuery handler ...

htmljqueryrangeslider

Enter information to accompany your images in the description box

After browsing through numerous websites tonight, I stumbled upon this code. My goal is to create a photo upload page on Google Drive and set up a dropbox for it. I'm facing an issue where the information inputted into my placeholder box (city and ye ...

javascripthtmlgoogle-apps-script

Tips and tricks for implementing vuetify tooltips within a list component

Looking for help with my code: <div id='app'> <v-app> <v-list-tile-content> <v-list-tile v-for="(item, index) in items" :key="item.id" > <v-list-tile-action> {{index+1}}. </v-list-tile-action> < ...

javascriptcssvue.jsvuetify.js

Is there an easy method to compare the CSS styles of a specific section in HTML?

Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...

asp.nethtmlcssdomstylesheet

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Is there a way to accomplish this? <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="14-March-2016" ...

javascriptjqueryhtml

What is the best way to organize large amounts of data into an array?

I am currently working on developing a unique version of wordle using javascript and html. In order to do this, I require a comprehensive list of all possible wordle words stored in an array format. Although I have the words listed within a document contai ...

javascripthtmlvisual-studio-codewordle-game

What is the process for adding a download link to my canvas once I have updated the image?

Is it possible to create a download link for an image that rotates when clicked, and then allows the user to download the updated image? Any help would be appreciated.////////////////////////////////////////////////////////////////////// <!DOCTYPE ht ...

javascriptjqueryhtmlcsscanvas