.children() vs .find("*")

by Mark

HTML

<div id="outer" class="wayOut">
     Top of #Outer
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4">    
        <div>We Don't</div>
        <div>Adopt Format</div>
        <div>From jQuery</div>
    </div>
    Bottom of #Outer
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

.wayOut {
    background-color: #6EA5FF;    
    font-family: 'Droid Sans';
    font-weight: bold;
}


#outer div {
  font-family: Oswald;
  padding:10px;
  background-color:lightgreen;
  margin:2px 0px;   
  outline: #FFEB79 solid thin;
}

#outer div.test {
  background-color:lightcoral;
  font-weight: normal;
}

JavaScript

$('#outer').children().addClass('test');

//$('#outer').find("*").addClass('test');
// ^^ All child elements are light coral

$('#outer > div').css('border-left', '5px solid #6EA5FF');
$('#outer > div').css('border-right', '5px solid #6EA5FF');