Archive for August, 2015

CSS target elements by partial class or ID name

This can simply be achieved using attribute selectors.

 

div[attr^="elem"]

// Matches any “div” with an “attr” attribute that begins with “elem”.

 

div[attr$="elem"]

// Matches any “div” with an “attr” attribute that ends with “elem”.

 

div[attr*="elem"]

// Matches any “div” with an “attr” attribute that contains the substring “elem”.

 

div[attr|='elem']

// Matches any “div” with an “attr” attribute that starts with “elem” and may continue with a dash (ex. “elem-string”).

 

Ex. target a “form” with the id=”login-[ID]-form” (where [ID] is a random form ID)

form[id^="login"]
// or
form[id^="login"][id$="form"]
// or
form[id*="login"][id*="-form"]
// or
div[id|='login']