Is it possible to arrange elements in CSS based on their attribute values?

I need to arrange a list of images in ascending order based on the index attribute using CSS. The challenge is that the index values will change dynamically and new images will be added through Ajax, so I want them to automatically update in the correct order without any manual intervention.

.img_container {
  width: 100%;
  border: 2px black solid;
}

.img_container img {
  margin-bottom: 5px;
  margin-right: 5px;
}
<div class="img_container">
  <img src="https://dummyimage.com/100x150/000000/ffffff&text=1" index="1">
  <img src="https://dummyimage.com/100x150/000000/ffffff&text=10" index="10">
  <img src="https://dummyimage.com/110x150/000000/ffffff&text=11" index="11">
  <img src="https://dummyimage.com/140x150/000000/ffffff&text=14" index="14">
  <img src="https://dummyimage.com/200x150/000000/ffffff&text=2" index="2">
  <img src="https://dummyimage.com/120x150/000000/ffffff&text=12" index="12">
  <img src="https://dummyimage.com/130x150/000000/ffffff&text=13" index="13">
  <img src="https://dummyimage.com/300x150/000000/ffffff&text=3" index="3">
  <img src="https://dummyimage.com/400x150/000000/ffffff&text=4" index="4">
  <img src="https://dummyimage.com/150x150/000000/ffffff&text=15" index="15">
  <img src="https://dummyimage.com/500x150/000000/ffffff&text=5" index="5">
  <img src="https://dummyimage.com/400x150/000000/ffffff&text=6" index="6">
  <img src="https://dummyimage.com/170x150/000000/ffffff&text=17" index="17">
  <img src="https://dummyimage.com/300x150/000000/ffffff&text=7" index="7">
  <img src="https://dummyimage.com/160x150/000000/ffffff&text=16" index="16">
  <img src="https://dummyimage.com/200x150/000000/ffffff&text=8" index="8">
  <img src="https://dummyimage.com/180x150/000000/ffffff&text=18" index="18">
  <img src="https://dummyimage.com/200x150/000000/ffffff&text=9" index="9">
</div>

Is there a simple way to achieve this sorting with CSS?

htmlcssimagesorting

Answer №1

A purely CSS solution that doesn't require modifying the HTML or adding inline styles is not yet available. It is speculated that in the future, leveraging the attr() function in CSS could potentially achieve this, but as of now, its support is limited when used outside of the content property.

If a more advanced approach is embraced, a prospective solution might resemble the following example. Please note that this method may not be compatible with current browsers. Additionally, utilizing the data- prefix for custom attributes is recommended.

.img_container {
  border: 2px black solid;
  display: flex;
  flex-wrap: wrap;
}

.img_container img {
  margin: 5px;
  order: attr(data-index); /* compatibility issues in most browsers */
}
<div class="img_container">
  <img src="https://dummyimage.com/100x150/000000/ffffff&text=1" data-index="1">
  <img src="https://dummyimage.com/100x150/000000/ffffff&text=10" data-index="10">
  <img src="https://dummyimage.com/110x150/000000/ffffff&text=11" data-index="11">
  <img src="https://dummyimage.com/140x150/000000/ffffff&text=14" data-index="14">
  <img src="https://dummyimage.com/200x150/000000/ffffff&text=2" data-index="2">
  <img src="https://dummyimage.com/120x150/000000/ffffff&text=12" data-index="12">
  <img src="https://dummyimage.com/130x150/000000/ffffff&text=13" data-index="13">
  <img src="https://dummyimage.com/300x150/000000/ffffff&text=3" data-index="3">
  <img src="https://dummyimage.com/400x150/000000/ffffff&text=4" data-index="4">
  <img src="https://dummyimage.com/150x150/000000/ffffff&text=15" data-index="15">
  <img src="https://dummyimage.com/500x150/000000/ffffff&text=5" data-index="5">
  <img src="https://dummyimage.com/400x150/000000/ffffff&text=6" data-index="6">
  <img src="https://dummyimage.com/170x150/000000/ffffff&text=17" data-index="17">
  <img src="https://dummyimage.com/300x150/000000/ffffff&text=7" data-index="7">
  <img src="https://dummyimage.com/160x150/000000/ffffff&text=16" data-index="16">
  <img src="https://dummyimage.com/200x150/000000/ffffff&text=8" data-index="8">
  <img src="https://dummyimage.com/180x150/000000/ffffff&text=18" data-index="18">
  <img src="https://dummyimage.com/200x150/000000/ffffff&text=9" data-index="9">
</div>

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

Using CSS to apply a gradient over an img element

Looking to add a gradient overlay to an <img> tag with the src attribute set to angular-item. Here's an example: <img src={{value.angitem.image}}> I attempted to create a CSS class: .pickgradient { background: -webkit-gradient(linear ...

htmlangularjscssgradient

replace the standard arrow key scrolling with a new custom event

Currently, I am in the process of creating a unique scroll box to address my specific needs. The standard html <select> box is not cutting it for me as I require two columns displayed, which I couldn't achieve with a regular <select>. However, I ...

javascriptjqueryhtmlhtml-select

Achieving unique horizontal and vertical spacing in Material UI Grid

In my current Material UI setup, I have set spacing in the Grid Container to space Grid Items vertically. While this works well on larger screens, it causes awkward horizontal spacing between Grid Items on mobile devices. <Grid container spacing={24}> ...

cssreactjsgridmaterial-ui

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

javascripthtmlcssiframecross-domain

Implementing a feature that ensures html elements are transparent in a PDF conversion

I am in the process of converting a webpage into a format that is easily printable as a PDF, while ensuring that it maintains the same appearance. Many tools for printing to PDF do not support background images or colors, so I am attempting to overcome thi ...

htmlcsspdfpdf-generation

Troubleshooting Issue: Unable to Collapse Bootstrap Responsive Navbar Button with Custom CSS Modifications

I recently created a responsive HTML page using Bootstrap, then converted it to WordPress and made some custom CSS adjustments. In the original HTML version of the page, the navbar collapse button worked perfectly when the screen was resized. However, afte ...

jquerycsstwitter-bootstrapresponsive-designnavbar

No JavaScript needed for this CSS framework

I have been tasked with creating a website without the use of JavaScript, following very specific instructions. Furthermore, it must be compatible with iPhone and other mobile devices, while still adhering to the no JavaScript rule. I am open to utilizing ...

phphtmlcsswebcss-frameworks

Guide to creating an uncomplicated quiz using PHP

My goal is to create a quiz with 15 questions. Every time a user lands on the page, they will see a random selection of 5 questions. Each question will have 4 multiple choice answers, with one being correct. The marks allocated for each question are 20, 15 ...

phphtmlmysql

Choose a radio button with a dynamic value in Selenium

How can I automatically select the radio button below with a changing value attribute? HTML: <form name="ViewQueryForm" method="post" action="/equery/getAttachments.do"> <div class="txt_align_left innerdvcont&q ...

pythoncssseleniumselenium-webdriverelement

css Repaint the CSS by filtering out list items with odd indexes

Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...

jquerycssfiltercss-selectorsjquery-isotope

Include a query parameter each time a page is added to bookmarks

Is there a way to automatically add a query parameter to a page URL when bookmarked using Chrome? For example, if I bookmark https://www.example.com, can it be saved as https://www.example.com/?bookmarked? I'm thinking I might need to use JavaScript ...

javascripthtmltypescriptgoogle-chromebookmarklet

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

How well do social media share buttons perform on websites

I'm experiencing issues with the performance of my gallery ever since I added social buttons. Currently, there are around 30 thumbnails in the gallery, each accompanied by four social buttons for different services like Facebook, Google Plus, Twitter ...

phphtmlperformanceshare-button

How can you update an image's source when hovering over it?

My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...

c#javascriptjqueryasp.netcss

Video with a personalized play button overlay

I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the tex ...

htmlcssvideotext

Embracing JQuery for Frontend Development with Node.js

I'm currently enhancing my node.js skills by utilizing express, and I've encountered a situation that is causing me some confusion. Essentially, when a user requests a webpage and the backend sends them the HTML page, how can I incorporate a Java ...

javascriptjqueryhtmlnode.js

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

javascriptjqueryhtmlcssimage

Using JQuery to implement custom validation on a text field is an effective way

How can I validate a text field using Regex and create my own validation rule for starting with "com."? Can you provide me with an example of how to do this? I want the text field to only accept values that start with com. <input id="appPackage" name=" ...

javascriptjqueryhtml

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

Is there a way to showcase the uploaded file contents on the current page without the need to refresh?

Is there a way to display the contents of an uploaded file on the same HTML page without opening a new tab or refreshing it? I have the following HTML and PHP codes for reading an uploaded file in a separate page, but I want to integrate it into the same H ...

javascriptphphtmlajax