Select the elements that are positioned every fourth or fifth, ninth or tenth, and fourteenth or fifteenth in the set

I'm currently designing a blog layout and I'm looking to implement a feature where every 4th and 5th, 10th and 11th, 14th and 15th, etc. post will have a unique class assigned to it.

The pattern I am aiming for is to have 3 regular posts followed by 2 with this distinct class, then another 3 regular posts, 2 more with the special class, and so on.

Despite my best efforts, I find myself confused when trying to use ":nth-child" in CSS. Can anyone provide some guidance or resources on how to achieve this effect?

jquerycsscss-selectors

Answer №1

To select elements using the nth-child selector, specify 5n - 1 and 5n as the parameters.

$('ul').children(':nth-child(5n-1), :nth-child(5n)').append('text')

Check out the demonstration: Fiddle

Answer №2

Alternatively, you can achieve the same effect using only CSS:

ul li:nth-child(5n), ul li:nth-child(5n-1) {
   color: crimson;
}

Example HTML structure:

<ul>
     <li>List item</li>
 </ul>

Try it out on this fiddle http://jsfiddle.net/xvwye/4/

UPDATE: Apologies for not addressing the actual question. This code snippet modifies the appearance of elements, not their class attributes.

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

As soon as the page finishes loading, the Dofullscreen function should be called without

Below is the script code: <script type="text/javascript"> function ToggleFullScreen() { var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard meth ...

javascriptjquery

a function that repeats every single second

A challenge I am facing is creating a countdown timer with a time that refreshes every second. My current implementation uses setInterval, but it only seems to run once instead of every second. Can anyone help me identify the issue in my code? var countDo ...

javascriptjquery

Executing PHP code from Javascript - Using AJAX to retrieve full HTML content of the webpage

As someone who is still getting to grips with PHP, I have been exploring ways to call a PHP method from a button. It seems that one approach involves assigning the button's onclick event to trigger a JavaScript function, which then uses Ajax to post t ...

javascriptphpjqueryhtmlajax

Is there a jQuery character count function that includes all characters, including ENTER and other special characters

Typically, the goal is to remove these, but I require the actual character count and am struggling to find a way to obtain it... Appreciate your assistance ...

jquery

Aligning object in middle of a responsive image using Bootstrap

I'm having trouble centering a button on an image using responsive design techniques. I am currently utilizing Bootstrap 3 and have attempted to use CSS margin properties to center the button, but this method is not ideal especially on smaller screens ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ways to output information via javascript/jquery

I am working on the following JS code. let myData=[]; for(let j=1;j<=Pages;j++) { $.ajax({ type: 'get', url: 'link.xml'+j, async: false, dataType: 'xml', success: function(data){ ...

javascriptjquery

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

javascriptphpjqueryhtmlajax

Incorporate a minimum width setting within the viewport meta tag

I'm currently in the process of creating a responsive web page. I want to ensure that the minimum screen width is set to 480px. How can I achieve this? Currently, I have fixed the width at 480px, which works well on phones but appears too large on ta ...

javascripthtmlcssmeta-tags

div-based fixed-header table

My current project involves creating a table using only div elements, with the added challenge of having a fixed header so it remains visible while scrolling. The initial setup was looking good until I attempted to implement the fixed header: Check out th ...

htmlcsscss-positioncss-tables

What makes this plugin capable of uploading files through ajax?

Why is this ajax upload file plugin using plain ajax when we know that files cannot be uploaded via ajax? _upload: function(id, params){ var file = this._files[id], name = this.getName(id), size = this.getSize(id); ...

jqueryajaxfile-upload

How to attach event to a button that is generated dynamically - Is live() the way

Currently utilizing a telerik grid control that showcases a grid with features such as paging, sorting, and filtering. Upon clicking the filter button on the grid, it triggers the appearance of the filter dialog. This dialog comprises a div containing inp ...

jqueryajaxdynamiclive

How to Toggle the :invalid State to True on a Dropdown Element Using JQuery

$("#select_id").is(':invalid') false Is there a way to change it to true? $("#select_id").addClass(':invalid'); $("#select_id").prop('invalid',true) Unfortunately, this method does not seem t ...

javascriptjquerycsspseudo-class

Setting default values or placeholders for dependent select lists is a common and useful feature that can improve the

Having four dependent select lists, I aim to assign a default value/placeholder like select ... to all the select lists. Nevertheless, the issue arises when attempting it using <option value=""> Select ... </option>, as changing the first selec ...

javascriptjqueryplaceholderselectlist

What is the best way to customize CSS in Material UI?

When working with material UI and reactjs, I encountered an issue while trying to override the button color without affecting the tab colors (see screenshot). How can I achieve this using themes in material UI? Code: const theme = createMuiTheme({ p ...

htmlcssreactjsmaterial-ui

Neglecting images on Zoom

Looking to scale up the elements on an HTML page by 50%, without affecting the resolution of images. Despite trying zoom: 150% in CSS3, it ends up zooming pictures as well, resulting in blurry visuals. Is there a way to enlarge all HTML components while ...

htmlcss

Long content within an editable div in a table causes the div to exceed its percentage-width

Recently, I encountered an issue while using Chrome. Inside a table, there is an editable DIV with a width defined in percentage. The CSS for the DIV looks like this: div#editable { width:20%; white-space:nowrap; overflow:hidden; borde ...

htmlcsswidthcontenteditable

Prevent the page from scrolling while the lightbox is open

I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from scrolling when the lightbox is active. <a href = "javascript:void(0)" onclick=" document.getElementById(& ...

javascripthtmlcss

Ways to implement a style to the initial child of nested recursive classes

I am attempting to create a style that only affects the first grandchild of the main container. The structure is as follows: .container { display: flex; } .container.main { border: 1px solid gray; } .container.main .item>* { border-color: red; ...

htmlcsscss-selectors

What could be causing my form to not be centered on the screen?

Currently working on creating a form for adding books to a fictional library website. The form tag is enclosed within a div, but despite the CSS styling applied, it remains fixed to the left side of the screen and I'm struggling to understand why. .fo ...

htmlcss

Inserting data into a MySQL database using PHP

I'm struggling to implement a star rating system and encountering issues with inserting the results into MySQL. I've reviewed my code multiple times but still can't pinpoint the problem. Below is the code snippet, hoping someone can identify ...

phpjavascriptjquerymysqlajax