This is a powerful, modern CSS technique. Let’s say you have an element that has an ID or class which is partially dynamically generated. Maybe the ID is always “summary” but then that is followed by a unique number per user. For example, “summary1” and/or “summary23”. How can you target this element? With an attribute selector and wildcard.
To create CSS that targets an element with an ID that starts with “summary” and could be followed by any number, you can use the attribute selector with a wildcard match. The CSS attribute selector [attr^=value] matches every element whose attribute value begins with a particular string. In your case, you want to target elements whose ID starts with “summary”. Here’s how you can modify your CSS to achieve this:
[id^="summary"] .summary-class {
display: none;
}This selector will apply the display: none; style to any element with a class of .summary-class that is a descendant of an element whose ID starts with “summary”, regardless of the number that follows “summary”.
Leave a Reply