Home  >  Article  >  Web Front-end  >  How can I select CSS elements with IDs containing specific text?

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

Linda Hamilton
Linda HamiltonOriginal
2024-10-31 06:54:29841browse

 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn