1

<a href="?&amp;" class="searchPageLink">« Back to Inbox</a>

has the same href value as

<a href="?&amp;" class="searchPageLink">Refresh</a> in one of my pages.

If I set custom CSS for one, the padding and margin values distort when I open another page with the same button. Do you know a way to distinguish both the entities (I'm guessing based on the content inside them?). I'd appreciate any help.

NFL
  • 93
  • 10
  • 1
    No, but this can be achieved by adding a unique tag such as `« Back to Inbox` or using a scripting language like `JQuery` or `Javascript`. This cannot be achieved in plain CSS without some sort of modification. If you're interested in any of these solutions, specify which & I'll supply an example as an answer. – EGC Jan 13 '20 at 02:08
  • You can use innerText property or order of element in the page – Mohamed Farouk Jan 13 '20 at 02:12
  • 1
    you can also use first child css property like `` Then CSS will be like `.mydiv a:first-child{background-color:yellow}` – Mohamed Farouk Jan 13 '20 at 02:14
  • @EGC I'd love to see an easy solution in JS, thank you for the prompt reply. – NFL Jan 13 '20 at 02:16
  • I added both CSS and JQuery methods in my answer below.. you can pick one :) – Mohamed Farouk Jan 13 '20 at 02:21
  • The simplest options is to give each element two classes ([yes elements can have more than one class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)) . Use `searchPageLink` for the common stuff then use the additional classes to provide link specific differences – Jon P Jan 13 '20 at 02:30
  • https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text answers the question of using the text inside the element for selectors (short answer: you can't using only CSS). – HPierce Jan 13 '20 at 02:30

2 Answers2

1

Here is a plain Javascript solution as requested.

var aTags = Array.prototype.slice.call(document.getElementsByTagName("a"));
var textToFind = "« Back to Inbox";

aTags.forEach(function(element){
  if(element.textContent == textToFind) {
   element.style.color = 'red';
  }
})
<a href="?&amp;" class="searchPageLink">« Back to Inbox</a>

<a href="?&amp;" class="searchPageLink">Refresh</a> in one of my pages.

Here is also the CSS with HTML modification example as requested:

a[data-name="inbox"] {
  color: red;
}
<a href="?&amp;" class="searchPageLink" data-name="inbox">« Back to Inbox</a>

<a href="?&amp;" class="searchPageLink" data-name="refresh">Refresh</a> in one of my pages.

Ref: JSFiddle

Goodluck!

Let me know if you want to see a JQuery solution!

EGC
  • 1,719
  • 1
  • 9
  • 20
  • No worries! The CSS/HTML solution has been included too – EGC Jan 13 '20 at 02:30
  • Instead of a data attribute, why not just add a second class, E.g `class="searchPageLink refesh"`? – Jon P Jan 13 '20 at 02:32
  • Also an option, at the same token, why not add a unique ID called `refresh`. Literally, there are so many solutions to this issue if they're willing to modify the HTML! – EGC Jan 13 '20 at 02:33
0

$($('.mydiv').find("a")[1]).css("background-color", "green") //Play with second link js
.mydiv a:first-child{background-color:yellow} /*play with first link css*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='mydiv'>
  <a href="?&amp;" class="searchPageLink">« Back to Inbox</a><br/>
  <a href="?&amp;" class="searchPageLink">Refresh</a> 
</div>
Mohamed Farouk
  • 1,089
  • 5
  • 10