CODEWITHSUNDEEP
javascripthtmlcss
David
David

Reputation: 129

How to hide child div without having ID

I have a problem, I need to hide all divs inside parent div except the first one. Problem is, divs have no ID or anything.

Is there a possible way how to do it? Preferably by CSS or pure JS?

<div role="list" class="slds-form">
    <div class="slds-grid">Visible</div>
    <div class="slds-grid">Hide</div>
    <div class="slds-grid">Hide</div>
</div>

Thank you for any advice :)

Upvotes: 0

Views: 144

Answers (4)

Shaikh Farooque
Shaikh Farooque

Reputation: 2630

Can add an extra class to toggle show hide.

.slds-hide {
  display: none;
}
.slds-show {
  display: block;
}

<div role="list" class="slds-form">
  <div class="slds-grid slds-show">Visible</div>
  <div class="slds-grid slds-hide">Hide</div>
  <div class="slds-grid slds-hide">Hide</div>
</div>

Upvotes: 1

Jai
Jai

Reputation: 74738

You can use :not(:first-child):

.slds-form>div:not(:first-child) {
  display: none;
}
<div role="list" class="slds-form">
  <div class="slds-grid">Visible</div>
  <div class="slds-grid">Hide</div>
  <div class="slds-grid">Hide</div>
</div>

Upvotes: 1

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you:

you can combine child selection(:first-child) with :not to attain the result you want.

.slds-form > div:not(:first-child) {
  display: none;
}
<div role="list" class="slds-form">
  <div class="slds-grid">Visible</div>
  <div class="slds-grid">Hide</div>
  <div class="slds-grid">Hide</div>
</div>

Hope this was helpfull for you.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370679

Use nth-child:

.slds-form > div:nth-child(n + 2) {
  display: none;
}
<div role="list" class="slds-form">
  <div class="slds-grid">Visible</div>
  <div class="slds-grid">Hide</div>
  <div class="slds-grid">Hide</div>
</div>

Upvotes: 2

Related Questions