How to target the last li element with a custom class using CSS?

I am working with a dynamic list that is populated from a SQL database. The list consists of items with different classes, such as "range1" and "range2". I need to select the last item in the list that has the class "range1", but using nth-child won't work due to the dynamic nature of the list.

<ul>
    <li class="range1">Entry</li>
    <li class="range1">Entry</li>
    <li class="range1">Entry</li>
    <li class="range2">Entry</li>
    <li class="range2">Entry</li>
    <li class="range2">Entry</li>
</ul>

Is it possible to achieve this selection using only CSS without resorting to JavaScript?

htmlcsscss-selectorshtml-lists

Answer №1

It is not possible to use the last-of-type or last-child pseudo-classes on a CSS class.

To achieve this, you can either utilize JavaScript or make slight modifications to your HTML (recommended approach):

<ul class="list">
    <li class="item">Entry</li>
    <li class="item">Entry</li>
    <li class="item last-item">Entry</li>
    <li class="item">Entry</li>
    <li class="item">Entry</li>
    <li class="item last-item">Entry</li>
</ul>

Answer №2

The functionality of the last-child selector is limited to targeting only the final element within its parent, regardless of any specific class names you may assign.

Another approach is using li.range1:nth-child(3). If that doesn't work, it may be necessary to create unique container classes for each specified list.

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

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

javascriptjqueryhtmlcssangularjs

The implementation of a fixed navbar using Javascript is encountering issues

is the site and it's currently being built using wordpress. The navigation bar is located within the <header> section, along with my logo at the top, so I'm not sure if that could be causing any issues. This code snippet includes the HTML ...

javascripthtmlcsswordpress

What causes child margins to extend beyond the boundaries of div elements?

Can anyone shed some light on the advantages of CSS behavior that allows a child element's top and bottom margins to extend beyond the boundaries of its block-parent? Check out this fiddle for a straightforward example. The pink div is influenced by ...

css

Tips for adjusting the width of table columns when dealing with browser fields

When working with a table field, I am allowing input as a file. <table> <tr> <th> <input type="file" name="icon" id="icon" /> </th> </tr> </table> The file input field is recommended to have a width of 242-246px ...

htmlcss

How can we generate a intricate polygonal figure using an image in CSS that can be utilized in the regions property?

I'm on a mission to transform black images into polygon shapes. The challenge at hand involves two key steps: Converting an image into a polygon Filling the polygon with text I'm currently stuck on the first step. Without any existing convert ...

csspolygonregions

Issue with removing a row from a table in AngularJS

#AngularJS I'm having an issue with deleting rows from a table. Whenever I click the DELETE button on any row, it always deletes the first one instead of the clicked row. Can someone help me identify where I went wrong? Here's a snippet of the co ...

javascripthtmlcssangularjs

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

javascripthtmlcssgoogle-chrome

What is the reason for needing a page reload in Javascript or JQuery?

I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...

javascriptjquerycssmedia-queriesreal-time

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

What is the trick to creating uneven sides (lower left and lower right) with varying heights?

Struggling to articulate my design vision, I'm attempting to achieve a unique look. Although I've explored the transform function, it's not quite what I'm looking for. Instead of rotating the div, I want a diagonal ending. Can this des ...

css

Tips to stop scrolling when clicking on a link in a Vue.js carousel

How can I prevent the page from scrolling when clicking on a link in a Vue.js carousel? I've created a carousel card to mimic the ones found on Netflix's main page. It works fine on a single component but when I add multiple carousel components ...

htmlcssvue.js

Using AngularJS to filter JSON data

Greetings! I possess the following JSON data: $scope.Facilities= [ { Name: "-Select-", Value: 0, RegionNumber: 0 }, { Name: "Facility1", Value: 1, RegionNumber: 1 }, { Name: ...

javascripthtmljsonangularjs

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

javascriptjqueryhtmlajax

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

cssangularjsangular-ui-bootstrapbootstrap-modal

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

Does the Android 4.3 Internet browser not support @font-face declarations?

After my Samsung Galaxy S3 phone recently updated from Android 4.1.3 to Android 4.3, I noticed that some of the websites I designed are not displaying the fonts correctly. These sites were tested on the Android internet browser and use @font-face. How can ...

csscross-browserfont-faceandroid-4.3-jelly-beanandroid-internet

creating dynamic JavaScript elements within a parent div container on the client side

I've been working on a JavaScript code that generates new div elements every few milliseconds and stacks them up. However, I'm facing an issue where the script is running outside of any specific div container. Is using document.getElementById("pa ...

javascripthtmldom

Switch up div content - advertisements at the top or bottom

An issue has arisen where the ads on a website are currently being displayed at the bottom of the source code, but they should actually be visible at the top. Here is the ad placeholder code: <div id="300_250_placeholder"></div> And here is ...

javascriptjqueryhtmlcss

Adjust the background color of a list item using Typescript

At the top of my page, there's a question followed by a list of answers and the option to add new ones. You can see an example in the image below. https://i.stack.imgur.com/NPVh7.jpg The format for each answer is "(username)'s response: at this ...

htmlangulartypescript

Incorporating CSS into React.js applications

I am currently working on a project using MERN.io. In my project, I am utilizing the React.js component Dropdown. However, the Dropdown component does not come with its own style and CSS, resulting in no styling at all. ... import Dropdown from 'rea ...

javascriptcssreactjswebpackmern