Get the perfect text by using css

Question

I want to get the VICE PRESIDENT and PRESIDENT Names by using css selectors.

If I select VICE PRESIDENT, we can use by this methods.

div:contains(VICE PRESIDENT)

But If we use this same method to select PRESIDENT, we can't get the perfect match

div:contains(PRESIDENT)

So how to select the perfect match? Please let me know

<div style="display: flex; flex-wrap: wrap; margin: -6px -10px;" class="">
  <div style="box-sizing: border-box; padding: 6px; width: 16.6667%; height: 242px;">
    <div>
      <div style="cursor: pointer;">
        <div tabindex="0" id="3353900_1746af24-b83f-4d7e-90ea-3eb7a145986a" style="color: rgba(0, 0, 0, 0.87); background-color: rgb(255, 255, 255); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: &quot;Source Sans Pro&quot;, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; border-radius: 2px; margin: 10px 5px; padding: 20px 10px 5px; text-align: center; min-height: 200px;">
          <div style="line-height: 0; margin-bottom: 20px;">
            <div alt="" size="75" style="color: rgb(255, 255, 255); background-color: rgb(101, 101, 101); user-select: none; display: inline-flex; align-items: center; justify-content: center; font-size: 37.5px; border-radius: 50%; height: 75px; width: 75px;">R</div>
          </div>
          <div style="font-size: 14px; text-overflow: ellipsis; overflow: hidden; font-weight: bold;">SECONDARY (2ND) CONTACT</div>
          <div style="margin: 5px 0px; font-size: 17px;" class="">Robby McCool</div>
        </div>
      </div>
    </div>
  </div>
  <div style="box-sizing: border-box; padding: 6px; width: 16.6667%; height: 242px;" class="">
    <div class="">
      <div style="cursor: pointer;" class="">
        <div tabindex="0" id="3353906_1746af24-b83f-4d7e-90ea-3eb7a145986a" style="color: rgba(0, 0, 0, 0.87); background-color: rgb(255, 255, 255); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: &quot;Source Sans Pro&quot;, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; border-radius: 2px; margin: 10px 5px; padding: 20px 10px 5px; text-align: center; min-height: 200px;"
          class="">
          <div style="line-height: 0; margin-bottom: 20px;" class="">
            <div alt="" size="75" style="color: rgb(255, 255, 255); background-color: rgb(101, 101, 101); user-select: none; display: inline-flex; align-items: center; justify-content: center; font-size: 37.5px; border-radius: 50%; height: 75px; width: 75px;" class="">R</div>
          </div>
          <div style="font-size: 14px; text-overflow: ellipsis; overflow: hidden; font-weight: bold;" class="">VICE PRESIDENT</div>
          <div style="margin: 5px 0px; font-size: 17px;" class="">Robby McCool</div>
        </div>
      </div>
    </div>
  </div>
  <div style="box-sizing: border-box; padding: 6px; width: 16.6667%; height: 242px;" class="">
    <div class="">
      <div style="cursor: pointer;" class="">
        <div tabindex="0" id="3353908_01bcfb25-7308-4a3f-b68e-19e537dee207" style="color: rgba(0, 0, 0, 0.87); background-color: rgb(255, 255, 255); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: &quot;Source Sans Pro&quot;, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; border-radius: 2px; margin: 10px 5px; padding: 20px 10px 5px; text-align: center; min-height: 200px;"
          class="">
          <div style="line-height: 0; margin-bottom: 20px;" class="">
            <div alt="" size="75" style="color: rgb(255, 255, 255); background-color: rgb(101, 101, 101); user-select: none; display: inline-flex; align-items: center; justify-content: center; font-size: 37.5px; border-radius: 50%; height: 75px; width: 75px;" class="">N</div>
          </div>
          <div style="font-size: 14px; text-overflow: ellipsis; overflow: hidden; font-weight: bold;" class="">PRESIDENT</div>
          <div style="margin: 5px 0px; font-size: 17px;" class="">Nathan Harris</div>
        </div>
      </div>
    </div>
  </div>
</div>

can you edit the html? adding unique classes to the divs you want to target and selecting those would be the easiest way — k88lawrence, Sep 24 '20 at 06:01
This is in the website. So I need to scrape the the president and vice president value — Techie Rebellion, Sep 24 '20 at 06:03
looks like you're using jquery, this question might be helpful for you: https://stackoverflow.com/questions/7321896/jquery-find-element-by-text — k88lawrence, Sep 24 '20 at 06:14

score 0 · Answer 1 · answered Sep 24 '20 at 06:23

0

You can use the filter() function to spcecifially target a text.

    $("div").filter(function() {   
        return $(this).text() === "PRESIDENT";
    }).css('background-color', 'red');

answered Sep 24 '20 at 06:23

Becky

5,467
9
40
73

This is in JavaScript. But I need it in CSS. – Techie Rebellion Sep 27 '20 at 15:55
I'm sure at the time you posted this question you had mentioned for a css or jQuery based solution. That's the reason I posted it. Under the main comments section I see someone else too has tried to help you by giving you a jQuery based suggestion. – Becky Sep 27 '20 at 16:04

Get the perfect text by using css

1 Answers1