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

Mobile navigation menu options on the left and right sides

I've encountered an issue with my mobile navigation. I have two navigation menus - one on the left and one on the right, designed to slide out when triggered. The left menu functions correctly with a smooth transition, but the right menu abruptly pops ...

jquerycssnavigation

EJS: Warning when the "<%= %>" tag is used multiple times within the code

I am currently working on incorporating EJS with Node.js and Express.js. I have defined an array variable called "kindOfDay" containing the names of days as strings, such as "Sun", "Mon"... Within the EJS views folder, there is a file named list.ejs. The i ...

htmlnode.jsexpressejs

Only output to the console if the data returned from an AJAX request has been

Here is a script that I created: <script type="text/javascript> $('.storage').html(""); setInterval(function(){ $.get('./playcommand.php', function(data) { if($('.storage').html() !== data){ ...

javascriptphpjqueryhtmlajax

Creating a multi-column ordered list that spans multiple pages is a great way to organize and

My goal is to showcase a numbered list in a three-column format, following the guidelines presented in this particular query. However, I am looking to maintain the continuity of the list across different pages by ensuring that the subsequent item on the ...

htmlcss

Issue with Element's Response to JQuery Click Event

After pulling elements from the database in PHP, I utilized Jquery to add Elements to the page. Each button has two classes; one for controlling the GUI and another for handling the click event of that specific button. Here is the code snippet: echo " ...

javascriptphpjqueryhtml

Iphone not picking up media queries, while browser resize is working perfectly

Hey there, I'm currently using a theme called Bones on my WordPress site, but I'm encountering some difficulties with the responsive menu on my iPhone. Oddly enough, when I manually resize the window, the menu seems to work just fine. Here' ...

csswordpressmedia-queries

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

htmlcss

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

javascriptjqueryhtmlrandomaudio-player

Issue with XAMPP: Editing PHP file does not update displayed content in browser

Initially, my code looked like this: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>PHP file</title> </head> <body> <h1> <?ph ...

phphtml

insert a new DOM element into an array using jQuery

Looking at the code snippet below: a_ajouter = $('.question'); hidden_div.push(a_ajouter); console.log(hidden_div); Upon examining the output in the console, instead of a DOM object being added to the div as intended, it shows &apo ...

javascriptjqueryhtml

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

cssreactjsmaterial-ui

Tips for locating a file within an input element in HTML using jQuery

I attempted to upload a file using jQuery's $.ajax call and formData. To add the file to the formData, I initially tried: var fd = new FormData(); fd.append($('#myFileInput)); However, this method failed. Next, I attempted: var fd = new Form ...

jqueryhtmlfile-io

Populating Modal on open with jquery/javascript

I am trying to dynamically populate a Modal when it opens, but so far all my attempts using append have failed. Here is the code for my Modal: <div class="modal fade" id="ModalForAllUsers" tabindex="-1" role="dialog" aria-hidden="true"> <div ...

jqueryhtml

Tips for adjusting the size of a textarea to perfectly fit within a table cell

I have a textarea displayed within an input in a table, but I am looking to resize it so that it completely fills the table cell up to the borders. Here is the logic: <textarea type="textarea" value="{{data.directRowNo}}" id = " ...

javascripthtmlcssangular

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior. Some variables only seem to be overridd ...

csssassbootstrap-5

`Issue with Firefox's rendering of HTML tables`

I have noticed that the table appears differently in Firefox compared to IE8/Chrome. You can view the website here: I would like the table to look more like it does in IE8/Chrome, where the lines are a light gray color instead of completely black. Any s ...

htmlfirefox

Add a new to-do list item to the current list using jQuery

Currently, I am in the process of developing a todo list application using jQuery. However, I have encountered some issues and bugs that are causing challenges. Initially, my objective was to set the first element through HTML code, which is functioning as ...

htmljquery

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Tips for keeping a Bootstrap Modal in a fixed position on the screen as you scroll

I am facing an issue with a button that is supposed to trigger a Bootstrap Modal. It seems that the modal is not visible when the page has been scrolled down. Upon clicking the button to show the modal, the background darkens as expected, but the modal its ...

javascripthtmltwitter-bootstrap-3