Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a number similar to those found in magazines or books. Let's assume there are 30 pages for the sake of discussion.
Subsequently, I am given a new page from the art department, which happens to be the fourth page, pushing the subsequent pages back by one. Additionally, for organizational purposes, the img files must be renamed as well (e.g. img-20-jpeg is now img-21-jpeg).
I am seeking a solution to avoid manually renaming classes for each div, img, paragraph in both the HTML and CSS.
I have attempted to disregard specific numbers in image sources and reference the CSS styling for each "page" using the nth-child selector. Moreover, I have tried to associate each package of text, effects, etc... with its immediate parent "page" using ~.
Unfortunately, my attempts have only resulted in significant headaches.
<div class="page">
<img class="page" src="photo/img.001.jpeg" alt="1">
<p class="text-page-1">
some text
</p>
</div>
<img class="page" src="photo/img.002.jpeg" alt="2">
<img class="page" src="photo/img.003.jpeg" alt="3">
<div class="page">
<img class="page" src="photo/img.004.jpeg" alt="4">
<video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
</div>
<div class="page">
<img class="page" src="photo/img.005.jpeg" alt="5">
<p class="text-page-5">
some other text
</p>
</div>