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.