Hello Everyone! Recently, I was working on a UI task and I had to give CSS styling to a div on the basis of ID. The div was being generated dynamically(with dynamic ID/class) using jquery mobile. I observed that the ID contained some identifiable pattern(along with dynamic numbers in between). I was looking for some wildcard selectors which we generally use in SQL,command-line scripts etc.(* and ?). I wasn’t aware of such wildcard selectors in CSS so I searched for CSS wildcard characters and learned that CSS3 do provide wildcard selectors using which we can apply our styling to DOM elements.

Div which I wanted to select had the following pattern:


"popupName-someDynamicNumber-popup"

so I decided to use CSS wildcards. Some wildcard characters supported in CSS3 are:

  • * – matches part of the attribute value with the given string
  • ^ – matches if the attribute begins with the given string
  • $ – matches if the attribute ends with the given string

I decided to use this for my scenario:(Note: I didn’t use class as that would apply the styling to all divs)


div[id^='popupName'][id$='popup'] {

// styles....
}

It means “Apply styling to all div with ID attribute starting with ”popupName” and ending with “popup”.

That was all.

Thanks