0

Following is the Jsfiddle I tried

http://jsfiddle.net/LpH8B/2/

<span>*</span>
<br>
<span>*</span>
    <br>
<span>hdhdf</span>

span[text='*']
{
    color:red;
}

what i want is the two spans with * content in it to be accessed from css?

Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
  • If that span is dynamically added, and the value of span is consistent, well just my opinion, would it be good if a class would be just added for that? like .askterisk {}. I know you already thought of it, but just giving an opinion. – Wesley Brian Lachenal May 06 '14 at 05:23
  • possible duplicate of [CSS selector based on element text?](http://stackoverflow.com/questions/5441680/css-selector-based-on-element-text) – Vucko May 06 '14 at 05:37

4 Answers4

4

Not sure if this is possible without using data attributes instead: http://jsfiddle.net/TkKwp/

HTML:

<span data-text="*"></span>

CSS:

span[data-text="*"]:before {
  content: attr(data-text);
  color: red;
  width: 15px;
  height: 15px;
}
wvandaal
  • 4,265
  • 2
  • 16
  • 27
1

Without the extra class, this might be helpful:

EDITED

HTML

<span>*</span>
<br>
<span>*</span>
<br>
<span>hdhdf</span>

CSS

span:nth-child(1),
span:nth-child(2){
    color:red;
}

EDITED.

mcn
  • 711
  • 4
  • 9
1

just Using CSS results cannot be achieved unless you use some attribute in span tag.

However using a bit jquery .filter() you can get the result.

check the DEMO.

$('span')
.filter(function(){ return $(this).text() == '*'; })
.css('color','#ef8913');
Kheema Pandey
  • 9,977
  • 4
  • 25
  • 26
0

You cannot get from the text value directly, you can use JQuery or Javascript to do such a job based on the internal contents but still you need to be operating in the definitions of CSS.

Adel
  • 1,468
  • 15
  • 18