47
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

I want to style the second only (innerHTML2) using CSS selectors, based on the inner HTML. Is this possible? I've tried using a[value=innerHTML2] but it doesn't seem to work.

whamsicore
  • 8,320
  • 9
  • 40
  • 50
  • Before you use it, read this "bug report" and JQ team response: http://bugs.jquery.com/ticket/9955 It may come handy to know. – Jeffz Oct 23 '11 at 16:57

7 Answers7

34

This is not possible using CSS. You can, however, do it using jQuery. There's a nice blog post on it you can read.

Marc W
  • 19,083
  • 4
  • 59
  • 71
18

It's currently not possible for all browsers with css, but with javascript you can do this

Updated w/ working code. JSFiddle link below:

Initial HTML per @whamsicore:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

JavaScript:

var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
    if(myEles[i].innerHTML == ' innerHTML2 '){
         console.log('gotcha'); 

         //use javascript to style
         myEles[i].setAttribute('class', "gotcha");
    }
}

CSS for styling:

/* make this look a bit more visible */
a{
  display: block;
}

.gotcha{
  color: red;
}

https://jsfiddle.net/kjy112/81qqxj23/

KJYe.Name
  • 16,969
  • 5
  • 48
  • 63
12

Using CSS you can't detect the content of the anchor tag.

[value=] would refer to an attribute on the tag

<a href="" value="blah"> innerHTML2 </a>

Not very useful since the value attribute isn't valid HTML on an a tag

If possible, slap a class on that a tag. As that is most likely not possible (because you would've already done that) you can use jQuery to add a class on that tag. Try something like this:

   <script type="text/javascript">
        $(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
    </script>

And then use .anchortwo as your class selector.

Michael Gaskill
  • 7,913
  • 10
  • 38
  • 43
Jason
  • 15,064
  • 15
  • 65
  • 105
  • edited because of the random downvote with no explanation – Jason Aug 12 '13 at 00:49
  • 1
    This is the closest answer as to why! TO NOTE: css selectors allow detection of attributes, these are predefined in the HTML code, where as innerHTML is a property of the DOM layer. They may resemble access in js, but are two different things, a.href is an attribute over which CSS has knowledge, a.innerHTML is a DOM property, obscure to CSS. – JasonXA May 28 '15 at 17:17
0

you can use the css nth-child property to access any element and do any changes. i Used it on a website i made to make a logo smaller or bigger based on the width of screen.

Abhansh Giri
  • 191
  • 1
  • 10
  • Can you provide a simple example of what the css code would look like to help others that may not be familiar with the property or format? – pczeus Jan 27 '17 at 21:02
  • for example if there is a div with class 'mark' and there are 4

    elements inside it, if i want to apply property to all even or odd elements, or even a single element, i can do this by n-th child property, go read about it on w3schools, as they have far better examples with all its variations, much better than what i would give here, i'm pretty bad at giving examples. ;) https://www.w3schools.com/cssref/sel_nth-child.asp

     – Abhansh Giri Apr 15 '17 at 04:34
  • 1
    Welcome to SO! Looks like this is one of your first answers. Your method is certainly a solution, but generally answers need two things: 1. a new answer to this specific question, which might be "you can't but here's a work around" and a sample of the code to solve the problem, because links go stale/break/move. When you get a chance, check out the [tour](https://stackoverflow.com/tour) if you haven't already. – Josiah Oct 04 '17 at 14:15
0

Using pup, a command line tool for processing HTML using CSS selectors, you can use a:contains("innerHTML1").

For example:

$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
 innerHTML1
kenorb
  • 155,785
  • 88
  • 678
  • 743
-3
<style>
a[data-content]::before {
  content: attr(data-content);
}
a[data-content="innerHTML2"] {
  color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1">&nbsp;</a>
<a href="example2.com" data-content="innerHTML2">&nbsp;</a>
<a href="example3.com" data-content="innerHTML3">&nbsp;</a>
ratoupoilu
  • 7
  • 8
    You're not selecting the element by innerHTML. You're selecting by an attribute which has the value "innerHTML1". So, you haven't answered the question. – Joe Thomas Dec 23 '15 at 20:00
  • 1
    by the way @joe-tom, It helps me solve my problem. If something is not possible, ratoupoilu has given an alternate. This is the problem with most newly-enriched-in-reputation stackoverflowians. – Ramesh Pareek Nov 30 '17 at 01:08
-11

This is quite simple with a nth-child selector.

<style>
a:nth-child(2) {
  color: green;
}
</style>
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Edit: Here's the source I found this at. Check here for browser compatability. Source: http://reference.sitepoint.com/css/pseudoclass-nthchild

josefnpat
  • 58
  • 4
  • This isn't supported cross browser. IE for example won't support this – Jason Jan 27 '11 at 01:10
  • 11
    Also it isn't selecting based on inner html it is selecting based on position so it doesn't really answer the question – Adrian Jan 27 '11 at 01:14
  • As said before, this does not select the element based on the content, but it selects the element based on the index which is not wat the OP asked. – Complexity Jun 30 '14 at 06:35