Practice Code
JavaScript Example (Program)
Learn Details

What is Sibling ?

Ans : जब किसी parent element के दो या दो से अधिक sibling element होते हैं, तो वह element एक दूसरे के sibling कहलाते हैं

Note.

  • इस example में parent x का sibling A,B,C,D है जो की यह आपस में sibling है ।
  • इसमें A का next Element Sibling B है , B का next Element Sibling C है , C का next Element Sibling D है।
  • इसमें D का previous Element Sibling c है , c का previous Element Sibling B है , B का previous Element Sibling A है।

1.nextElementSibling

Syntax :

attributename.nextElementSibling

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Sibling of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Sibling of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

      var a  = document.querySelector(".main-parent .inner-parent span").nextElementSibling;
      console.log(a);
      //styling
      var b = document.querySelector(".main-parent .inner-parent span").nextElementSibling;
      b.style.background="lightblue";

</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>

2. What is DOM previousElementSibling

इस method के द्वारा किसी Sibling के previous Sibling को return करता है |

Syntax :

attributename.previousElementSibling

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Sibling of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Sibling of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

      var a  = document.querySelectorAll(".main-parent .inner-parent ul li")[1].previousElementSibling;
      a.style.background="lightblue";

</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>

3. What is DOM nextSibling

यह method भी nextElementSibling की तरह किसी parent के nextSibling को return करता है

Different between nextSibling & sibling element

nextElementSibling : यह parent के अंदर space या break को भी sibling समझता है

nextSibling : यह parent के अंदर space या break को sibling नहीं समझता है

Syntax :

attributename.nextSibling

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Sibling of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Sibling of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

var a  = document.querySelectorAll(".main-parent .inner-parent ul li")[0].nextElementSibling;
console.log(a);


</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>

What is DOM previousSibling

यह method भी previousElementSibling की तरह किसी sibling के previousSibling को return करता है

Different between nextSibling & sibling element

previousSibling : यह sibling के अंदर sbace या break को भी sibling समझता है

previousElementSibling : यह sibling के अंदर sbace या break को sibling नहीं समझता है

Syntax :

attributename.previousSibling

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Sibling of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Sibling of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Sibling of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

var a  = document.querySelectorAll(".main-parent .inner-parent ul li")[0].previousElementSibling;
console.log(a);


</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>