How to Target Elements with IDs Containing \'Some:Same\' and Ending with \'name\' using CSS?

CSS Selector for Elements with IDs Containing Specific Text

Problem:

Consider HTML elements with IDs in the format "someGenerated Some:Same:0:name" or "someGenerated Some:Same:0:surname." How can we use CSS to select only those elements with IDs containing "Some:Same" and ending with "name"?

Solution:

Using the following CSS selector accomplishes this:

a[id*='Some:Same'][id$='name']

Explanation:

• a[id*='Some:Same']: Selects all a elements whose IDs contain the string "Some:Same." The asterisks (*) are used as wildcards, allowing any characters before or after "Some:Same."
• [id$='name']: Selects all elements whose IDs end with "name." The dollar sign ($) is used as a wildcard at the end of the string.

By combining these selectors, we can isolate the specific a elements with IDs containing "Some:Same" and ending with "name."

The above is the detailed content of How to Target Elements with IDs Containing 'Some:Same' and Ending with 'name' using CSS?. For more information, please follow other related articles on the PHP Chinese website!