CODEWITHSUNDEEP
htmlcss
John John
John John

Reputation: 1

How to hide all tables under a div , except which that have its td title equals specific value

I have the following code inside my SharePoint web page, it mainly contains a div and 5 tables inside it (the number of tables can be increased or decreased in the future).

enter image description here

So I want to hide all tables except the table that have its third TD tile within the first TR equals to "Pages"? Currently I wrote the following to hide all tables except the third table, but as the number of tables may change so this will break, so I want to make my CSS more dynamic , by using the title ?

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(3)) {
    display: none;
}

Can anyone advice?

Upvotes: 0

Views: 196

Answers (1)

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

This is not possible with CSS right now, because you want to select a specific element, the a in this case, and then actually apply CSS rules to one of its parents. CSS can (right now) only apply rules to the actually selected element.

You need Javascript to fix this issue. In MooTools for example this would work:

$$('div.thatYouAreTargeting table').each(function(t) {
  if(t.getElement('a[title=Pages]'))
    t.setStyle('display', 'none');
});

With jQuery it's equally simple, with native Javascript a tad more verbose.

Upvotes: 1

Related Questions