CODEWITHSUNDEEP
htmlcssdomcss-selectorsstyles
Felix Xilef
Felix Xilef

Reputation: 1

How to format inner html text of an element without changing format of subelements? (Selector)

I have an html with the following structure:

<p>
  This is some test inside the p tag
  <div class="some-class">
    <div class="sub-div-class">
      <i title="title test" data-toggle="tooltip" class="some-icon-class" data-original-title="Title test" style="color: rgb(25, 118, 210);">
        <svg width="21" height="18" viewBox="0 0 16 16" fill="currentColor" version="1.1" aria-hidden="true" class="bi bi-eye-slash-fill">
          <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z">
          </path> 
          <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z">   
          </path>
        </svg>
      </i>
    </div>
  </div>
</p>

I'm trying to change the "This is some test inside the p tag" opacity without affecting the icon opacity. Any ideas?

I've checked on selector documentation but I have not seen anything that can help.

Important Note, This html is generated from VueJS components so they are in fact rendered as they are seen, I'm looking for a selector That only takes the raw text from a p tag to style it but don't selects other elements inside the p tag.

Upvotes: 0

Views: 36

Answers (1)

IT goldman
IT goldman

Reputation: 19485

It makes sense it's possible because they are different nodes.

var text = "hello world";
document.querySelector("p").firstChild.data = text;
<p>
  This is some test inside the p tag
  <div class="some-class">
    <div class="sub-div-class">
      <i title="title test" data-toggle="tooltip" class="some-icon-class" data-original-title="Title test" style="color: rgb(25, 118, 210);">
        <svg width="21" height="18" viewBox="0 0 16 16" fill="currentColor" version="1.1" aria-hidden="true" class="bi bi-eye-slash-fill">
          <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z">
          </path> 
          <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z">   
          </path>
        </svg>
      </i>
    </div>
  </div>
</p>

Upvotes: 1

Related Questions