I'm currently experiencing difficulties with the functionality of the nth-child selector

Having some issues with the :nth-child pseudoclass. My goal is to target the 9th child, followed by every subsequent 6th child.

Starting with the 9th, then 15th, 21st, 27th, 33rd, and so on.

I attempted to achieve this using the following CSS:

.child-div:nth-child(9n+6) p {
    margin: 0;
}

Unfortunately, it didn't work as expected.

I experimented with different formulas like 10n+6, 6+9n, and others. I even consulted a tutorial from this source, but couldn't find a solution.

If anyone knows why the formula isn't working or if there are limitations to the format, please advise. Can we only use formulas like 4n+4 or similar patterns?

csscss-selectors

Answer №1

Nice job, you're almost there:

.child-div:nth-child(6n+9) p {
    margin: 0;
}

See it in action here : http://jsfiddle.net/5Y49A/1/

Answer №2

Here is the solution you've been looking for:

.child-div:nth-child(6n+9) p {
    margin: 0;
}

This rule targets every sixth element starting from the ninth.

If you're having trouble with nth-child, try using this helpful online tool:

:nth tester

Answer №3

I think you are looking for this:

.child-div:nth-child(6n+9) p {
    margin: 0;
}

This selector targets every 6th element, starting from the 9th.

It follows a formula (an + b). Explanation: 'a' indicates the cycle size, 'n' serves as a counter (beginning at 0), and 'b' is an additional value to adjust the offset.

Answer №4

It must be 

.child-div p:nth-of-type(6n+9){
        margin: 0;
    }

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

Class remains unaffected by media query modification

With Bootstrap5 in play and an additional stylesheet added as the last one in the lineup, my goal is to customize the margins of the .content class. The snippet of code below resides at the end of my stylesheet... .content { width: 100vw; m ...

htmlcssbootstrap-5

Is there a way for me to place my list item onto the following available line?

Here's the code I'm working with: .bottombarelementL { display: inline-block; margin-right: 10px; transition-property: all; transition-duration: 1s; float: left; margin-left: 20%; } .bottombarelementL:hover { display: inline-blo ...

htmlcssforms

nsIStyleSheetService - The Gateway to Stylish CSS

I am currently utilizing nsIStyleSheetService within my Firefox extension to apply a custom stylesheet to every webpage. While everything is functioning properly, there are a few styles that are not being applied as expected. One of the styles causing iss ...

cssfirefox-addon

What is causing the navbar to malfunction on mobile devices?

I am facing an issue with my bootstrap navbar. It seems to be getting stuck when the screen resizes or when viewed on a mobile device. I have tried several solutions from various sources, but none seem to work. Here are some of the answers that I have look ...

javascripthtmlcssbootstrap-4

Calculate the pixel distance between various divs by measuring the horizontal distance from the left border to the right

I am trying to find the precise distance between : #main div left edge to the first div with class="b" between the first div with class="b" to the second div with class="b" It's worth noting that the divs may be arranged randomly and could have fix ...

javascriptjqueryhtmlcss

Incorporating Computer Modern Serif into Your Jekyll GitHub Page

I have customized a version of the Jekyll GitHub page from here and am trying to incorporate Computer Modern Serif font as the main body font across all pages. Following instructions from an informative answer, I have downloaded the necessary files from th ...

htmlcssjekyllgithub-pageswebfonts

"My attempts to link various buttons in separate Bootstrap modals to their specific content are not yielding successful results

Greetings fellow members of Stack! Please bear with me as I am a newcomer here. I am currently working on a Business website for a friend using Bootstrap3. On our team page, we have multiple members and I would like to display additional details for each ...

jqueryhtmlcsstwitter-bootstrapbootstrap-modal

The Div element on my webpage is not adjusting properly to fit the size of mobile devices

My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile. Here is the code snippet: <!--css--> <style> .quickFlip, .quickFlip3 { height: 350px; width: 400px; } .quickFlip2 { ...

androidjquerycssjquery-mobileflip

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

javascripthtmlcssreactjsmaterial-ui

Nested Classes in JQuery

Looking for help with fading in text using jQuery. Despite setting everything up, it doesn't seem to be working. Can someone assist me with this issue? Here is my current code: .nav ul li { opacity: 0; padding: 0px 50px; transition: opacity 2s ease-i ...

jqueryhtmlcsstransition

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

javascriptcssvue.jsvue-routervuetify.js

Decreasing the gap between form controls such as textboxes and labels with Bootstrap

I am currently working on a .NET (C#) MVC web application and I have implemented a Bootstrap dropdown menu in my project. My main objectives are as follows: 1) I aim to minimize the space between a label and its corresponding text-box. Initially, I at ...

javascriptc#htmlcsstwitter-bootstrap

Show button once modal has been closed

I have a 'start' button that triggers a modal window with an embedded video. Once the user closes the modal, I want to show a 'redeem' button after a delay of 6 seconds. HTML: <a id="video-start" onclick="openVideoModal()"><i ...

javascripthtmlcssmodal-dialogbootstrap-modal

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

javascriptjqueryhtmlcssgoogle-chrome

What is causing the divs to stack vertically instead of aligning horizontally?

I have encountered an issue with the layout of my HTML code. The inner divs are appearing in a lower row instead of horizontally inside the outer div with horizontal scrolling. I have already tried using properties like white-space:nowrap, but the proble ...

htmlcssreactjs

Positioning a centered div with absolute positioning may result in offset issues on Android devices when the content exceeds the viewport size

Encountering a peculiar issue on Android browsers, particularly when the following elements are present on a page: A div element larger than the device's viewport size. (In this case, set at 1200px.) One or more other div elements styled for centeri ...

androidhtmlcssmobile

Use CSS to position three buttons in the center of a row by aligning them horizontally

I need help aligning three buttons in the same row and centered vertically. I want them to be aligned in the same way as the text "Select your attack:" Please advise on how to achieve this alignment. .prompt_user_to_choose { margin: 0; display: flex; ...

csscenter

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

javascriptjqueryhtmlcss

Update the parent node in the Google Org Chart

This is my first time working with Google Charts and I have a couple of questions: Is there a method in the API to update the parent of an existing node? I am facing a challenge where I need to build a tree structure top-down, which means that I know the ...

javascriptjqueryhtmlcssgoogle-visualization