Re: [css-selectors] :contains()

> > Possible use cases for :contains() are:
> > - styling negative numbers (https://bugzil.la/221981#c30)
>
> So this is :contains("-").

Or having regular expressions this could be:

  :contains(/^-\d+(\.\d+)?$/)

> > - highlighting Sundays in a calendar
>
> How so? I can't think of a way how this works. Note that in a normal
> calender, there's no text like "SUN" in each cell.

You're right. It's not working for Sundays because you can't access the cells by their column, but it might work for holidays:

  .december td:contains("25")

or using a regular expression:

  .december td:contains(/^25$/)

> > - highlighting search matches in a table
>
> Can you elaborate on this? Do you mean something similar to the color
> for "Yes" and "No" in a Wiki-style comparison table like[1]? At first
> glance, td:contains("Yes") and td:contains("No") do look interesting as
> this can indeed achieve some sort of content-style separation (for
> example, there's discussions about these styles in the Talk page[2] of
> the {{Yes}} template, and the concluded style could have been applied as
> CSS rules instead of change to the template), but this is rather
> restricted because it turns out that there are all sorts of text strings
> that use the {{Yes}} style.

Yes, I was thinking of something similar. Also, having :contains available via querySelectorAll() you could make a dynamic search within a table and apply a CSS class to the matches:

var name = "Kenny";
var table = document.getElementById("users");
var matches = table.querySelectorAll("td:contains('"+name+"')");
for (var i=0; i<matches.length; i++)
  matches[i].classList.add("match");

> > I assume you mean the 'textContent' property.
> > This would be a speed boost in many cases, though you would also lose
> functionality. E.g. imagine something like this:
> >
> > <p>This is an <strong>important</strong> sentence.</p>
> >
> > Then you wouldn't have the possibility to style the paragraph by
> searching for the word 'important'.
>
> I think if you can provide a pointer to a site that does something like
> this, it would be helpful. (Having said that, it is indeed quite
> unnatural if :contain() means "directly contain".)

Unfortunately I don't have one off-hand. But you know these sites that are saying something like "You came here via Google. We marked the entered keywords in the text of this page for you.".

> > That's why I mentioned it. There will be cases, in which you need to
> > do more than a simple substring check. E.g. somebody might want to
> > highlight a table row depending on whether it contains an email
> > address.
>
> Same here.

http://pythoughts.com/table-style-css/ at "ABC Basic":
Wanting to mark all email address cells with a background color you could do:

  td:contains(/.*@.*\..*/) {
    background-color: whitesmoke;
  }

http://www.usability.com.au/resources/tables.cfm at "Prices of Brass and Steel nuts and bolts":
If you want to style the '10cm' and '20cm' row you could use:

  th:contains(/\d+cm/)

Or at http://www.w3schools.com/css/css_table.asp you would like to mark all rows with 'Germany' and 'UK' as country:

  tr:contains(/Germany|UK/)

Or with use of as parent selector:

  tr:contains(td:last-child:contains(/^Germany|UK$/))

Sebastian
-- 
NEU: FreePhone 3-fach-Flat mit kostenlosem Smartphone!                                  
Jetzt informieren: http://mobile.1und1.de/?ac=OM.PW.PW003K20328T7073a

Received on Friday, 20 April 2012 07:07:14 UTC