The curious case of CSS nth-of-type quirks

I am using CSS nth-of-type(even) to organize divs. It usually works fine, but when I send an AJAX request and add new HTML div after another one, the selector starts behaving strangely.

.row > .cd-timeline-block-sort:nth-of-type(even) > .cd-timeline-content {
  float: right;
}


<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284">
<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="268">
<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282">

and after making the AJAX request:

<!-- 1 --><div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284">
<!-- 2 --><div class="cd-timeline-block" data-event-id="268" style="display: none;">
<!-- 3 --><div class="cd-timeline-block cd-timeline-block-sort eventForm" id="eventEditForm" style="display: block;">
<!-- 4 --><div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282">

In the second example, there are 4 divs with 3 of them having the class .cd-timeline-block-sort. I want to position (1) on the left, (3) on the right, and (4) on the left side.

htmlcss

Answer №1

It appears that you are seeking an "nth-class" pseudo selector that is not currently available. Given your use of JavaScript, I recommend considering these alternatives:

  1. Remove the unwanted element from the DOM
  2. If removal is not feasible, try changing the tag name of the undesired element to something else:
(1st div) div.cd-timeline-block.cd-timeline-block-sort
(1st del) del.cd-timeline-block
(2nd div) div.cd-timeline-block.cd-timeline-block-sort
(3rd div) div.cd-timeline-block.cd-timeline-block-sort

To style this appropriately in CSS:

.row > div:nth-of-type(even) { }
.row > del                   { display: block; }
  1. Alternatively, consider reorganizing your elements into different groups:
(1st div) div.group
              .cd-timeline-block.cd-timeline-block-sort
(2nd div) div.group
              .cd-timeline-block
              .cd-timeline-block.cd-timeline-block-sort
(3rd div) div.group
              .cd-timeline-block.cd-timeline-block-sort

Incorporate the following CSS for this grouping:

.row > div:nth-of-type(even) { }

Answer №2

To locate the specific element using jQuery, you can follow these steps:

// Selecting the third element with the class "cd-timeline-block-sort"
var $block = $('.cd-timeline-block-sort').eq(2);
// Checking if the element is found
if (typeof($block) !== 'undefined') {
   // Applying the desired CSS styles
   $block.css('float', 'right');
}

If necessary, more intricate logic can be implemented.

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

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? Here's my HTML code: <mat-form-field appearance="outline" fxFlex=" ...

javascripthtmlcssangulartypescript

Maximizing Efficiency: Using a Single Prototype-Instance Across Multiple HTML Pages

I have defined some Javascript "Classes" in separate files using the Prototype function as shown below: function Playlist(id, name){ this.id = id; this.name = name; } Playlist.prototype.getid = function(){return this.id;} Playlist.prototype.getn ...

javascripthtml

Using Python's BeautifulSoup library to pull information from an HTML table

I need help extracting a table from a webpage. Here's the HTML and Python code using beautifulsoup that I've been trying with. It usually works for me, but this time it's coming up blank. Any insights are appreciated! <table> <thea ...

pythonhtmlbeautifulsoup

What is preventing me from creating accurate drawings on canvas?

I'm currently working on a paint application and facing an issue. When I place the painting board on the left side of the screen, everything works fine and I can draw without any problems. However, when I move it to the right side of the screen, the m ...

javascripthtmlcsscanvas

Assigning arbitrary hidden form data from dropdown selection

Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...

javascripthtml

Centered vertically: Enhancing buttons with Bootstrap 3

I am struggling to vertically center a group of buttons within a column (as seen in the image). The height of the row is variable and I have tried numerous approaches without success. Screenshot: <div class="row question even"> <div class=" ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The window.open function is creating a new tab using the specified origin or URL

I have a button within an iframe on the webpage "loclahost:3000". When this button is clicked, it should open a new tab with the URL "www.google.com". However, instead of opening the desired URL, the new tab opens with the following incorrect URL: "http:// ...

javascripthtml

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

csstwitter-bootstrapbootstrap-4

Efficient scripting on Visual Studio

In Visual Studio, a helpful feature is the option box on the left side that allows you to collapse code within curly braces { } using a "-" to minimize and a "+" to expand. This keeps the code organized and clean. I'm curious if there's a way to ...

javascriptcssperformancevisual-studioorganizer

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

javascriptjqueryhtmlcopyappend

Tips on Getting Your Contact Form Operating Smoothly

Hey everyone, I'm exploring the world of web design and have a question about getting my contact form to work on my current theme. Below is the HTML code I am using: I would greatly appreciate it if someone could help me with coding the PHP file; doe ...

phphtml

Issue with jQuery fadeTo() not working after appendTo() function completes

I am facing a problem with the code below that is meant to create a carousel effect for my website. The main issue I am encountering is that the original fadeTo() function does not actually fade the elements, but rather waits for the fade time to finish an ...

javascriptjqueryhtmlcss

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

javascriptcssangularjstwitter-bootstrap

Retrieve the value of an AngularJS expression and display it in a window alert using AngularJS

Hey there, I am in the process of trying to display the value of an expression using AngularJs As a beginner in angular, I am working on figuring out how to retrieve the value of the expression either with an alert or in the console. I'm utilizing A ...

javascriptangularjsjsonhtml

Having trouble locating and scrolling through elements while webscraping with Python Selenium, encountering the 'cannot focus element' error

I have been trying to extract ticket information from the VividSeats website. The URL I am working with is '' My tools of choice are Selenium and Python. I managed to navigate to the page using Chrome WebDriver and interact with the pop-up tha ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

htmlcsscheckbox

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

What steps can I take to design a functional hamburger menu?

After multiple attempts to create a hamburger menu, I have hit a roadblock. Clicking on the menu icon transforms it into an 'X', but unfortunately, it does not trigger the opening of the menu. Despite days of effort and research, I have yet to fi ...

javascripthtmlcssnavigationbarhamburger-menu