CODEWITHSUNDEEP
htmlcss
John John
John John

Reputation: 1

Hide specific tables inside a div

I have the following HTML inside my sharepoint page:-

<div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">

<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
</div>

Now I want to hide all the tables inside the div except for the third table. Can anyone advise? I used to hide the first table using the following :-

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:first-child { display: none !important;
 }

Upvotes: 0

Views: 73

Answers (3)

Candlejack
Candlejack

Reputation: 445

In the event that you need to support IE8 or below, the :not / :nth-child selectors will be unsupported (although :first-child is supported in IE8). If that is the case, I would suggest adding some inline styling to the third table.

HTML:

<div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0; display:block;">

<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
</div>

CSS:

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table { display:none; }

I don't think you should have any trouble with the CSS overriding your inline styling, but if this did happen you could consider using !important. Although using !important is often not great practise and requires careful consideration, I tend to use it if supporting IE8 makes it a necessity.

<table cellspacing="0" cellpadding="0" style="border-width:0; display:block !important;">

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

You can use :not selector

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

:not selects other than the child-element mentioned in it.

!important overrides any previous property used for the table.

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

Use the :not, and :nth-child(n) selector:

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

  • :not(selector) selects every element, except the one matching the selector inside the parentesis.

  • nth-child select the elements that are the nth child of its parent.

Also

Avoid using !important, unless you really need it. It will mess up your code.

Upvotes: 5

Related Questions