'CSS, how to target id tag in html that changes on page refresh

I'm trying to change the background color of section of the html (built on Wordpress, using Flatsome theme) that has a section's id that changes every time that page is refreshed; dynamic id in a sense.

For example the website has:

<div class="row row-large row-solid" style="max-width:1200px" id="row-1887573675">

but when I refresh the page, the id changes to something else. So, if I want to change the background colour with the following:

    .page-id-2001 #row-1887573675 {background-color:rgb(196, 213, 242);}

It will not work, I guess the id changes and would be able to target the id tag.

I'm wondering if there is a way to target this div section so I can change the background colour.

Thanks!

css


Solution 1:[1]

Try to use CSS [attribute^=value] Selector, i hope it'll resolve your issue. Thank You

Documentation: https://www.w3schools.com/cssref/sel_attr_begin.asp

.page-id-2001 [id^='row-'] {background-color:rgb(196, 213, 242);}

Solution 2:[2]

You should add a special class to your element and then select that specific class in your stylesheet and give it the rule you wish (in this case: background-color:rgb(196, 213, 242);).

If it doesn't work, it means there is a conflict of specificity between CSS declarations. That may be the reason you wanted to use an ID, but if using an ID doesn't work well, I suggest you should give a higher specificity score to your declaration by other means.

You can find a table that shows you how to give a declaration a higher score. Cascade and inheritance MDN article

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hassan Siddiqui
Solution 2 Radu

Related Questions