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']

Leave a Reply

Your email address will not be published. Required fields are marked *

− 3 = 5

This site uses Akismet to reduce spam. Learn how your comment data is processed.