Having trouble with nth-child selector in HTML when using Handlebars?

Looking at the code snippet below, I'm attempting to utilize nth-child in order to have every 4th, 7th, 10th, etc. category appear on a new line. Unfortunately, it seems that the CSS code is not functioning as expected.

#categories:nth-child(3n + 1) {clear: left;}
{{#if categories}}
<div id="categories">
  {{#each categories}}
  <div class="category" id="category-unit" url="{{url}}">
    <div class="category-icon"></div>
    <div class="category-name">{{name}}</div>
    <span class="category-info"></span>
  </div>
  {{/each}}
</div>
{{/if}}

htmlcsscss-selectors

Answer №1

To start, make sure you are targeting the children inside your #categories element, not the div itself. Additionally, using :nth-child(3n + 1) will include the first element in the selection. If you specifically want to target the 4th, 7th, 10th, and so on elements without including the first one, you can use the following CSS:

CSS

#categories > div:nth-child(n+4):nth-child(3n + 1) {
  background: #FF0000;
}
<div id="categories">
  <div>The first paragraph.</div>
  <div>The second paragraph.</div>
  <div>The third paragraph.</div>
  <div>The fourth paragraph.</div>
  <div>The fifth paragraph.</div>
  <div>The sixth paragraph.</div>
  <div>The seventh paragraph.</div>
  <div>The eight paragraph.</div>
  <div>The ninth paragraph.</div>
  <div>The tenth paragraph.</div>
  <div>The eleventh paragraph.</div>
</div>

Answer №2

nth-child can be used to select specific classes or elements for filtering. In this case, the goal is to have the .category elements clear every X items, so it's important to target them directly instead of using #categories.

#categories .category:nth-child(3n + 1) {
    clear: left;
}

Check out the demonstration on JSFiddle.

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

Eliminating the need for horizontal scrolling in the window causes a change in the height of an internal DIV element

Check out this snippet of code, a simplified version of a larger piece: html, body { margin: 0 !important; padding: 0 !important; /* overflow-x: hidden; /* uncomment this line */ } .app { position: relative; width: 100%; text-align: center !important; } ...

htmlcss

Grab a parameter from the URL and insert it into an element before smoothly scrolling down to that

On a button, I have a URL that looks like this: www.mywebsite.com/infopage?scrollTo=section-header&#tab3 After clicking the button, it takes me to the URL above and opens up the tab labeled tab3, just as expected. However, I would like it to direct m ...

javascripthtmltypescript

Positioning child divs using CSS

I am trying to arrange the #inner2 and #inner3 divs to float next to each other while also adjusting to fit perfectly within the #outer div when the browser window size changes. Unfortunately, inner3 is not floating correctly as it should be and is overlap ...

cssposition

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...

htmlcssheight

Tips for achieving accurate encoding when using groovy's HtmlParsing on a website

I am currently working on a Groovy script that involves parsing HTML from a Swedish website, and I need to extract the special characters Å, Ä, and Ö. Although this is just an example and not the actual site I am scraping, the problem remains the same. ...

htmlgroovycharacter-encoding

What is the best way to eliminate #name from a URL?

On my website, there is an internal link that currently reads as http://www.example.com/#name. I am looking to modify this link to simply be http://www.example.com. ...

htmlurl

Transfer information from session to vue-component

Within my routes file, I obtain the current user from the session and then render the profile HTML: app.get('/profile', isLoggedIn, function(req, res) { res.render('profile.html', { user : req.user // extract user ...

htmlnode.jsexpressvue.js

Bring your text to life with animated movement using HTML5 and/or CSS3

My goal is to have a snippet of text, like "Lorem Ipsum..." slide horizontally into a colored DIV quickly, then smoothly come to a slow stop, continue moving slowly, speed up again, and exit the DIV - all while staying within the boundaries of the DIV. I ...

htmlanimationcss

Try utilizing querySelectorAll() to target the second item in the list

As I delve into the world of HTML and JS, I came across the document.querySelectorAll() API. It allows me to target document.querySelectorAll('#example-container li:first-child'); to select the first child within a list with the ID 'exampl ...

javascripthtmlcssdom

jQuery creates unique IDs for every keypress event triggered

Hey there, I'm currently working on developing a space shooting game using jquery and jquery-collision. I've made great progress so far, but I'm facing an issue. Whenever I press the spacebar to shoot, it keeps generating divs with the same ...

javascriptjqueryhtmljquery-collision

what distinguishes CSS properties for Id versus class selectors

Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...

css

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...

javascriptjquerycssasp.net

CSS failing to acknowledge specified div background

After successfully configuring the featured-top and footer elements in my CSS, I encountered an issue with a persistent white line appearing between them. Despite inspecting the elements in Google Chrome, I couldn't identify the source of this problem ...

htmlcss

Executing a jQuery event after a div's background-image has finished rendering

Greetings and thank you for sparing a moment. I'm curious to know if there exists a method through jQuery to execute a function immediately after a background image in a div has completed downloading and rendering. Imagine you have the following div ...

javascriptjqueryhtmlcss

In what way does AngularJS asynchronously navigate through the Angular template made up of HTML and AngularJS Directives?

While diving into the AngularJS book penned by Brad Green and Shyama Sheshadari, I stumbled upon the following insightful passage: The initial startup sequence unfolds as follows: 1. A user triggers a request for your application's first page. ...

javascripthtmlangularjsasynchronous

The functionality of `config.assets.debug = true` fails to

I've encountered an issue with the configuration on development where config.assets.debug = true doesn't seem to work correctly. Instead of having multiple separate JavaScript and CSS file inclusions, I'm getting a consolidated one: <li ...

javascriptcssruby-on-rails

`Generating an ever-changing masonry layout on a website using live data`

I'm currently working on a new web project and I want to incorporate a masonry view for the images on the homepage. The plan is to host this project on Azure, using blob storage for all the images. My idea is to organize the images for the masonry vi ...

javascripthtmlcss

My approach to using this style in React involves utilizing the class attribute as follows: "class[attribute]" [Updated version 2]

When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example: <div class='something' data-test='4'></div> ... .something[data-test] { bac ...

cssreactjs

The Faux-Dynamic News Feed on a stationary website

As I work on revamping my employer's static website, it has become clear that a news section needs to be integrated. The site is being built using the Bootstrap 3.0 framework. My plan is to implement the following strategy: I aim to have a JavaScrip ...

javascriptjsonhtmltwitter-bootstrap

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid