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

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  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!

CodePudding user response：

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);}

CodePudding user response：

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