0

How to change CSS for the Div in the 1st line having h3 text "Example Text1"

<div class="test">
  <div>
    <h3> Example Text1 </h3>
  </div>
</div>

<div class="test">
  <div>
    <h3> Example Text2 </h3>
  </div>
</div>
UI Admin
  • 11
  • 2
  • This is currently not possible in CSS: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text – Evan Summers Sep 20 '22 at 12:05

2 Answers2

0

You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.

You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use

.test:first-of-type h3 {
  color: red;
}

To only style the first h3 tag.

You could also look into something like :contains() from jQuery if you don't mind adding a dependency.

Alex
  • 848
  • 6
  • 7
0

You can't give CSS to div having a child with specific text. But you can use :first-child CSS.

.test:first-child h3 {
  color: red;
}
<div class="test">
  <div>
    <h3> Example Text1 </h3>
  </div>
</div>

<div class="test">
  <div>
    <h3> Example Text2 </h3>
  </div>
</div>