How can I select CSS elements with IDs containing specific text?

CSS Selector Targeting IDs Containing Specific Text

In web development, elements can be identified with unique IDs, providing a way to style and interact with them specifically. However, when IDs contain dynamic parts that change across elements, accessing specific elements based on partial text can be challenging.

Consider the scenario where you have multiple anchor () elements with IDs like "someGenerated Some:Same:0:name" and "someGenerated Some:Same:0:surname." Your goal is to obtain only the elements with IDs containing the text "name."

One approach might be to use the attribute selector "[id*='Some:Same']," but this would return all elements with IDs containing "Some:Same," regardless of the ending text.

Instead, you can utilize a more precise selector:

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

This selector effectively narrows down the search by first checking for elements with IDs containing "Some:Same" using the "[id*='Some:Same']" part. It then further filters the results to include only elements whose IDs end with "name" using the "[id$='name']" part.

This combined selector ensures that only elements with IDs containing "Some:Same" and ending with "name" are retrieved. In this case, it would successfully target the elements with IDs "someGenerated Some:Same:0:name" and "someGenerated Some:Same:1:name."

The above is the detailed content of How can I select CSS elements with IDs containing specific text?. For more information, please follow other related articles on the PHP Chinese website!