CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bpy
bpy

Reputation: 1180

How to style an element wit random css id

I want to style an Id from an external form rendered (javascript) on my site. Problem is that the ID is random like this:

  1. page refresh one: div#4-register-form-container57287c94e2312
  2. page refresh two: div#4-register-form-container35469e56e2278
  3. page refresh tree: div#4-register-form-container6575c98e1274
  4. page refresh four: div#4-register-form-container25242e33e6584
  5. and so on...

If I try to style it without that the random number it won't works... Is it possible to style it?

Upvotes: 3

Views: 1693

Answers (4)

Munawir
Munawir

Reputation: 3356

Use [attribute^=value] CSS selector.

ie, div[id^="div#4-register-form-container"] - Selects every element whose id attribute value begins with div#4-register-form-container

div[id^="div#4-register-form-container"] {
  color: red;
} 
<div id="div#4-register-form-container57287c94e2312">
  Random div 1
</div>

<div id="div#4-register-form-container35469e56e2278">
  Random div 2
</div>

Upvotes: 1

BenG
BenG

Reputation: 15154

you can use the starts-with ^= operator and group the id in []:-

div[id^="4-register-form-container"] {
  height: 50px;
  border: 1px solid red;
}
<div id="4-register-form-container25242e33e6584">

</div>

Upvotes: 5

Jan Franta
Jan Franta

Reputation: 1721

Yes it is. Use CSS selectors like [id~="-register-form-container"].
Read here more about selectors.

Upvotes: 1

Valery K.
Valery K.

Reputation: 147

You can try this with jQuery $('div[id^=div#4-register-form-container]') or document.querySelectorAll('[id^="4-register-form-container"]'); for native JS

Upvotes: 0

Related Questions