How to change CSS for a div having child with specific text?-CodePudding

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

<div >
  <div>
    <h3> Example Text1 </h3>
  </div>
</div>

<div >
  <div>
    <h3> Example Text2 </h3>
  </div>
</div>

CodePudding user response：

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.

CodePudding user response：

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 >
  <div>
    <h3> Example Text1 </h3>
  </div>
</div>

<div >
  <div>
    <h3> Example Text2 </h3>
  </div>
</div>