Css Rule Based on Content

CSS rule based on content

No. :contains was once proposed but is not in the current Working Draft of CSS3 Selectors.

You would need some JavaScript, for example:

for (var i= document.links.length; i-->0;)
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red';

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

Apply css only when text is equal to X

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>");
}

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

Is there a CSS selector that applies when matching specific values in the URL?

To be sad there is no pseudo classes to select element's based on URL.The only way you can do it is by adding class to the body tag or specific element and then override the CSS.

How to apply a css rule based on the number of siblings an element has?

This is actually pretty easy to do, usually people use the data attribute [thanks @david-thomas] in html to accomplish this:

A DIV wrapper and children:

<div class="wrapper" data-wrapper-subs="3">
    <div class="some-class">Child 1</div>
    <div class="some-class">Child 2</div>
    <div class="some-class">Child 3</div>
</div>

And its CSS:

div.wrapper[data-wrapper-subs="1"] div { width: 99%; }
div.wrapper[data-wrapper-subs="2"] div { width: 49%; }
div.wrapper[data-wrapper-subs="3"] div { width: 32%; }
div.wrapper[data-wrapper-subs="4"] div { width: 24%; }
div.wrapper[data-wrapper-subs="5"] div { width: 19%; }

div.wrapper div.some-class { /* Generic child styling */ }

The important thing is to set the data-wrapper-subs to the number of children.

If you don't know the number of children obviously this won't work, but as far as I know you can only style based on :first-child, :last-child, :only-child, :nth-child(odd), :nth-child(even) and :nth-child([number])

---

Related Topics