Selecting childs from parent CLASS to child ID using jQuery selectors

Question

I'm pretty sure this is just a semantics problems but I would be very grateful if someone could lead me in the right direction.

The HTML:

<div class="grid_7">
  <div class="big">
    The elusive
  </div>
</div>

The function:

$(function(){
$(' .grid_7 > .big').bigtext();});

I'm trying to grab .grid_7's child .big

Here's a link to the real code:

http://designobvio.us/dov2/index.html

I know the script works cuz when i do

 $(function(){
$(' .grid_7:first-child').bigtext();});

everything fine... therefore, it's semantics? or am I crazy?

Thank you so much

Answer 1

Read the documentation on the bigtext plugin website :

the BigText jQuery plugin takes a single element and sizes the text inside of its child <div> s to fit the width of the parent element.

Your .big element doesn't have any child div elements, so nothing happens.

The reason your :first-child attempt works is that :first-child returns the first .grid_7 element, not the first of its children.

You need to apply the bigtext method to .grid_7 , or you need to add another div around .big .