jquery DOM Traversal

HTML

<div class="parent">
  <p>.parent</p>
  <div class="child">
    <p>.child</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.parent {
  width: 90%;
  border: 5px solid #E18728;
  float: left;
}

.child {
  width: 90%;
  padding: 20%;
  border: 4px solid black;
  margin: .5em auto;
}

.twins {
  width: 50%;
  padding: 1em;
  border: 4px solid black;
  float: left;
}


/* styling for Pen, not related to box-sizing or layout */

body {
  font-family: sans-serif;
  font-size: 1.1em;
}

p:not(.intro) {
  text-align: center;
}

.highlight {
    background-color: yellow;
}

JavaScript

// Parents, children, siblings
// Follow the directions for selecting the element. 
// This is practice for finding elements using traversal
// methods such as .parent(), .children(), etc. To highlight
// the selected element(s) use <selected>.addClass('highlight');
 
/** METHODS TO PRACTICE 
Parents
	.parent(), .parents(), .parentsUntil(), .closest()
Children
	.children(), .find()
Siblings
	.prev(), .prevAll(), .prevUntil(), 
	.next(), .nextAll(), .nextUntil()
	.siblings()
**/

/** CHILDREN SELECTORS **/
var parent = $('.parent');

// 1. Find the last .twins element
//parent.children('.twins:last').addClass('highlight');
//parent.children('.twins').last().addClass('highlight');
// 2. Select both .twins elements
//parent.children('.twins').addClass('highlight');
// 3. Highlight all <p> tags other than ".parent"
//parent.children('div').children().addClass('highlight');
//parent.find('div p').addClass('highlight');
/** SIBLINGS **/
var child = $('.child');

// 4. Highlight the .twins elements
//child.nextAll().addClass('highlight');
// 5. Select self and the last .twins element
//child.add(child.siblings('.twins:last')).addClass('highlight');
// 6. Select self and both .twins elements
//child.add(child.nextAll()).addClass('highlight');
//child.prev().siblings().addClass('highlight');
/** PARENTS **/

var childPara = $('.child p');

// 7. Highlight the .parent element (whole box)
//childPara.parent().addClass('highlight');
// 8. Select all p tags inside .twins
//childPara.parent().nextAll().children().addClass('highlight');
// 9. Highlight .child and .twins
//childPara.parent().parent().children().addClass('highlight');-wrong

childPara.closest('.parent').children('div').addClass('highlight');