Can CSS Selectors Target Elements Based on Their Inner HTML?

Selecting Elements Based on Inner HTML in CSS

Question:

How can we use CSS selectors to target elements based on their inner HTML? Specifically, consider the following HTML:

<a href="example1.com">innerHTML1</a>
<a href="example2.com">innerHTML2</a>
<a href="example3.com">innerHTML3</a>

Is it possible to style only the second element (innerHTML2) using CSS selectors based on the inner HTML?

Answer:

Unfortunately, it is not possible to target elements based on their inner HTML using CSS alone. The value attribute in a[value=innerHTML2] does not refer to the inner HTML of the anchor tag.

Alternatives:

If you wish to style elements based on their inner HTML, you can consider using JavaScript frameworks like jQuery. Here is a jQuery selector that can target the second element:

$('a:contains("innerHTML2")')

The above is the detailed content of Can CSS Selectors Target Elements Based on Their Inner HTML?. For more information, please follow other related articles on the PHP Chinese website!