Apply css only when text is equal to X

Question

I have a link like this:

<h1>
    <a href="#">Title 001 - Stuff</a>
</h1>

I want to style only "Title 001". It's possible to create a css rule to do this? I don't remember how I did in the past, I think it was something like this:

h1 a[text="Title 001"]

But this doesn't work

And... then I want to know if it possible to do that with "Title XXX" where XXX is a dynamic number.

No you cannot style text, you can only style elements, wrap the text in an element then style the element. — Musa, Jan 17 '14 at 16:23
How are you making this HTML? Why not just add a class to the `` tag? — gen_Eric, Jan 17 '14 at 16:24
See http://stackoverflow.com/questions/1777357/css-rule-based-on-content — MungoRae, Jan 17 '14 at 16:25

score 3 · Answer 1 · answered Jan 17 '14 at 16:25

3

You can't select by content, but you can use attributes (as you nearly did already).

<h1>
    <a href="#" data-content="Title 001 - Stuff">Title 001 - Stuff</a>
</h1>

a[data-content="Title 0001 - Stuff"] {
    color: red;
}

answered Jan 17 '14 at 16:25

Lars Beck

3,446
2
22
23

Sampson · Accepted Answer · 2014-01-17T16:50:13.767

Duplicate Content in Attribute

If you would like to avoid using JavaScript, you could duplicate the content (gasp) in an actual attribute, and select based on that attribute:

<a href="#" data-content="Title 001 - Stuff">Title 001 - Stuff</a>

And then select anything that starts with "Title":

a[data-content^="Title"] {
    color: red;
}

Manually Test textContent

Alternatively, you'd have to take an approach with JavaScript:

var links = document.querySelectorAll( "a" );
var pattern = /^Title\s\d{3}/;

for ( var i = 0; i < links.length; i++ ) {
    if ( pattern.test( links[ i ].textContent ) ) {
        links[ i ].classList.add( "distinguish" );
    }
}

This is simply one example of how you could add a .distinguish class to all matching elements.

Filtering with jQuery

If you are using jQuery (or a similar utility) you could accomplish this without so much verbosity:

$("a").filter(function () {
    return /^Title/.test( $(this).text() );
}).addClass("distinguish");

Isolating "Title :digits:"

If you only want to isolate, and style, the Title XXX portion and you don't have access to the source templates, you could do this too with JavaScript:

$("a").html(function ( index, html ) {
    return html.replace(/(Title \d+)/, "<span>$1</span>");
});

The above assumes you are using jQuery, but if you're not you can accomplish the same thing with the following:

var anchors = document.getElementsByTagName("a")
  , length = anchors.length
  , el;

while ( length-- ) {
    el = anchors[ length ];
    el.innerHTML = el.innerHTML.replace(/(Title \d+)/, "<span>$1</span>");
}

Thanks @jonathan-sampson works great, but I would only apply style "Title XXX" text, not the whole text. I'm thinking isn't possible without another surround tag like . But isn't possible because the text comes from a cms, I can't change the text and I don't want to use Javascript. — singuerinc, Jan 17 '14 at 16:39
@singuerinc You're correct that you will need to wrap that text in a new element. If you do not have access to the source, you can wrap it with JavaScript too. — Sampson, Jan 17 '14 at 16:41

score 2 · Answer 3 · answered Jan 17 '14 at 16:29

With css

<a href="#" data-content="Title 001 - Stuff">Title 001 - Stuff</a>
a[data-content^="Title"] {
    color: red;
}.

But

Here is what you can do with jQuery in much smarter way,

$('a').filter(function (i, element) {
    return element.text == "Title 001 - Stuff";
}).css('color','green');

Working fiddle

score 0 · Answer 4 · answered Jan 17 '14 at 16:24

I'm afraid this is impossible in CSS.

You're using an attribute selector:

a[text="Title 001"]

and your <a> hasn't got an attribute called text.

You would have to use Javascript to handle such situation. There was once an idea to have a :contains() pseudo-selector but this has never been implemented.