Allowing breaks with the :nth-child() selector

There must be a straightforward explanation for this perplexing issue. However, in my view, it ought to function as intended.

We are currently utilizing the Bootstrap 3 CSS framework. The following code is present on a specific page:

<div class="promotions-overview">
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
</div>

Upon applying .promo-row:nth-child(odd) to style the odd promo-rows with a grayish background color, all promo-rows end up being styled. Interestingly, when I eliminate the <hr> elements, the CSS is correctly applied. I may be mistaken, but given that I am using the class .promo-row in the CSS selector, it should only target these elements to determine if they are odd rows or not. Why are the <hr> elements being perceived as elements with the same class?

htmlcsscss-selectors

Answer №1

.promo-row:nth-child(odd) doesn't refer to "the odd .promo-row child elements," but rather to the odd child elements that are also .promo-row elements. It's similar to how .foo.bar selects elements with both the foo and bar classes.

CSS doesn't support the concept of "nth matching this selector." If your structure follows a regular pattern like you've shown, you can still use nth-child while accounting for the hr elements by using :nth-child(4n+1):

.promoties-overzicht .promo-row:nth-child(4n+1) {
  background-color: yellow;
}
<div class="promoties-overzicht">
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
</div>

Answer №2

According to information found on MDN's website regarding the use of :nth-child():

The :nth-child(an+b) CSS pseudo-class identifies an element with an+b-1 siblings preceding it in the document tree, based on a specified positive or zero value for n, and having a parent element.

It is important to note that <hr/> elements, being siblings of your promo elements, are included in this pseudo-class calculation.

Answer №3

To count every child element and not just those with the .promo-row class, you can use a selector like 

.promo-row:nth-child(4n)

This will select a child element every four children (including 2 .promo-row elements and 2 hr elements) starting with the first child.

Answer №4

One of the reasons for this behavior is that the sequence of odd numbers is interrupted by the appearance of <hr> (or another block element). This interruption affects all subsequent .promo-row elements.

For example, consider the following scenario:

<div class="row promo-row">.. other contents ..</div>
<div class="row promo-row">.. other contents ..</div>
<div class="row promo-row">.. other contents ..</div>
<div class="row promo-row">.. other contents ..</div>

<hr>
<div class="row promo-row">.. other contents ..</div>
<hr>
<div class="row promo-row">.. other contents ..</div>
<hr>

In this case, the css styles will only be applied to the third .promo-row, and not to the last one, due to the presence of the <hr> element between them (which resets the counting).

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

various stunning galleries accessible from a single page of thumbnail images

I'm trying to create a unique gallery experience on my website. I have a set of 6 images, each featuring a different house. What I want is for each image, when clicked, to open up a fancybox gallery showcasing 4 more detailed photos of the same house. ...

javascriptjqueryhtmlfancybox-2

Do the Push Notification APIs in Chrome and Firefox OS follow the same set of guidelines and standards?

Do Chrome and Firefox OS both use Push Notifications APIs that adhere to the same standard? If not, is either one moving towards standardization? ...

javascripthtmlgoogle-chromefirefox

Softening the edges of a table

Could you assist me in rounding the corners of my table? I attempted using the basic border-radius, however, it only separated the border at the corners. Do you think this issue is due to my browser (Firefox) or could it be a bug? You can view my Jsfiddl ...

htmlcsscss-tables

"Animating dynamic elements based on conditions in React: A step-by-step

I am currently working on a React application where I am using React Spring for animations. However, I am facing some difficulties in animating certain elements. The primary animation I am experimenting with is a simple opacity transition. i ...

cssreactjsanimationbootstrap-4react-spring

Exploring High-Density Mobile Devices with Bootstrap 3 Landscape Mode

After completing my first Bootstrap site using version 3, I noticed a display issue when viewing it on an iPhone 5 or LG G2 in landscape mode due to the pixel density. This was not a problem with the Responsive Grid system I previously used. Although I sp ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

javascriptc#jqueryhtmlasp.net

Responsive images in CSS3/HTML5 are designed to adapt to different

I am looking to implement responsive image sizing based on the webpage size. My images come in two different sizes: <img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img> The data-small image has ...

javascripthtmlcss

Tips for preserving dynamically generated HTML through Javascript during page reload

I have a straightforward question, but I haven't been able to find a suitable answer. Here's my situation: On my HTML page, I have a form. Using jQuery and AJAX, I submit the form and then use some JavaScript code to change the content of a spec ...

javascriptjqueryhtmlajaxcodeigniter

Enhancing web page interactivity through dynamic element names with Javascript and jQuery

I have an interesting HTML setup that looks like this: <div> <input type="text" name="array[a][b][0][foo]" /> <input type="text" name="array[a][b][0][bar]" /> <select name="array[0][a][b][baz]>...</select> </div> ...

phpjavascripthtmlarrayspost

Steps to create a responsive iframe for Slideshare

Recently, I included a slideshare iframe presentation on my webpage. Here is the code snippet I used: <iframe src="//www.slideshare.net/slideshow/embed_code/key/HQoiz6GR1oLe1n" width="860" height="600" frameborder="600" marginwidth="0" marginheight="0 ...

htmlcsswordpressiframe

The storing of data in an HTML form input

Within my submission form, there are five distinct inputs that users can enter and submit. Currently, the entered data is being written to a .txt file successfully. Nevertheless, the objective is to organize and display the information in an easily readabl ...

htmlmysqlformsexcelcsv

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

`Is there a way to conceal a div class when the input id value is not filled in?"`

I've hit a roadblock with this issue that's been troubling me for days. I would greatly appreciate any assistance in solving it. Working on a Wordpress theme, I have an options panel where users can input their Twitter username. My goal is to di ...

phpjquerywordpresshtmlhide

Default check reversed for radio inputs

I am working with an MVC radio button group, and the issue I'm encountering is that even though the value of 1 "Copy" is set to checked="True", it is not displaying as pre-checked. Here's the code snippet: <div class="editor-field"> < ...

htmlradio-button

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

javascriptjqueryhtmlcss

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

The anchor tag seems to be malfunctioning within the div container

<style type="text/css> .xyz { position: absolute; top: 120px; left: 160px; z-index: -1; } #container { position: relative; overflow: visible; opacity: .3; } </style> <body> <div> <video i ...

javascriptjqueryhtmlcss

Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...

htmltwitter-bootstrapcss

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

javascriptphphtmljqueryjquery-events