Selecting First GRAND-child DIV?

[Planet13]

Hey all,

Can you help me with the selector for a first GRAND-Child div if I am trying to give it 400px witdh.

(Unfortunately, I can't add id or class tags to the column_1_of_3 nor to the generic_row divs)

Here is the basic structure:

<div id="my_style">
<div class="generic_row">
<div class="column_1_of_3">400px please - target THIS DIV only </div>
<div class="column_1_of_3">200 px</div>
<div class="column_1_of_3">200 px</div>
</div> <!-- closes .generic_row -->
<div class="clear_me"></div>
<div class="generic_row">
<div class="column_1_of_3">200 px</div>
<div class="column_1_of_3">200 px</div>
<div class="column_1_of_3">200 px</div>
</div> <!-- closes .generic_row -->
</div> <!-- closes #my_style -->

Below is all the CSS code I have for this document. Let me just mention that this following line is the one that needs to be modified, I believe:

div:first-child div.generic_row div:first-child {width: 400px; margin-right: 20px; float: left;}

Because unfortunately, it makes both the first column in the first row AND the first column in the second row 400px wide.

Anyway, here is all the CSS code I have for this:

body {width: 100%;}
div.generic_row {width: 1050px;}
.column_1_of_3 {width:200px; margin-right: 10px; float:left; border: 1px solid #ccc;}
.clear_me {clear: both;}
div:first-child div.generic_row div:first-child {width: 400px; margin-right: 20px; float: left;}

Thanks in advance.

[lucy24]

Would you settle for "first child of first child"? (Please tell me you're not from one of those awkward families where the younger brother married first, so all the grandchildren are the wrong ages.) It would then look like

.envelope > div:first-child > div:first-child

That's the minimalist form, which may require tweaking. The "first-child" selector means "the first child of its parent", whoever that parent may be.

Why can't you add an id or class? Nested selectors can get messy very fast.

[Planet13]

Firstly, thanks for selector, Lucy. It worked fine!

I can't say that I UNDERSTAND it though. But for now, give a man a fish is fine for today.

"Why can't you add an id or class? Nested selectors can get messy very fast."

Well, you asked, so here goes:

I am using a wordpress theme that allows for real easy layout options - drag and click rows, sliders, testimonials, etc.,

And while it is easy to plug something into the layout or drag it around to move it, there are a ton of nested divs that they don't allow you to assign an id or a class.

Hence, for some of the things I want to style with this them, I have to target grand-child and great grand-child divs individually.

Again, thanks for the assist.

[Fotiman]

.envelope > div:first-child > div:first-child

I can't say that I UNDERSTAND it though

Then lets look at each part of it.

.envelope > div:first-child

Remember, the > means "direct children of". So that means find the first div element that is a direct child of an element with class envelope.

So...

.envelope > div:first-child > div:first-child

That means find the first div element that is a direct child of the first div element that is a direct child of an element with class envelope.

Now, using your markup:

<div id="my_style">
  <div class="generic_row">
    <div class="column_1_of_3">400px please - target THIS DIV only </div>
    <div class="column_1_of_3">200 px</div>
    <div class="column_1_of_3">200 px</div>
  </div> <!-- closes .generic_row -->
  <div class="clear_me"></div>
  <div class="generic_row">
    <div class="column_1_of_3">200 px</div>
    <div class="column_1_of_3">200 px</div>
    <div class="column_1_of_3">200 px</div>
  </div> <!-- closes .generic_row -->
</div> <!-- closes #my_style --> 

I would write the selector as this:

.generic_row:first-child > .column_1_of_3:first-child

In other words, select the first element with class column_1_of_3 that is a direct child of the first element with class generic_row.

[Planet13]

Thanks so much for the explanation, Fortiman.

Just so I am SURE that I understand your example:

.generic_row:first-child > .column_1_of_3:first-child

The reason you AREN'T using "

div:first-child

" is because the first element happens to be a DIV, so we don't have to specify "

div:first-child

", correct?

Or is there a different reason that you would suggest to use:

.generic_row:first-child > .column_1_of_3:first-child

Instead of Lucy's suggestion of:

#my_style > div:first-child > div:first-child

Thanks in advance.

[lucy24]

I did say there was potential tweaking. Use whichever form works in your specific situation, and that doesn't work in other situations.

For a "child" selector to work, you need two pieces:

something > otherthing

So for a "grandchild" selector to work, you need three pieces:

something > otherthing > thirdthing

Each of the three "things" could be
.something
#something
div.something
p.something
a#something
et cetera et cetera. Just remember that "first child" doesn't mean "first child of its type" or even "first block-level child"; it means first child, period.

It's easiest to conceptualize if the ancestral piece is a table. Then the first child is the first row, and the first grandchild is the first cell in that first row. Unless you use tbody or caption, or even a header row, and then everything goes to pot.

[edited by: not2easy at 1:09 am (utc) on Nov 18, 2014]
[edit reason] popular request [/edit]

[Planet13]

Thank you, Lucy. The table metaphor does help clarify it for me.

And (for what it is worth) the code you gave me originally worked out best because there are several other instances of descendant divs with the same class scattered throughout the page that I DIDN'T want to modify. So I am glad you gave me with the very specific version.

[Fotiman]

The reason you AREN'T using "div:first-child" is because the first element happens to be a DIV

Not exactly. The reason I wasn't using div:first-child was because I generally try to avoid styling a generic HTML element (div in this case) if it has a class that seems like a more appropriate target. Looking at the CSS code, it would be more clear to me which element I was targeting by using .generic_row:first-child than div:first-child. Also, if you add any other div elements that are NOT generic_row elements, then the div:first-child may no longer be exactly the element you wanted (unless you increased specificity further by narrowing it to another ancestor). For example, suppose you later changed your markup to this:

<div id="my_style">
 <div>
  <h2>...</h2>
 </div>
 <div class="generic_row">
  <div class="column_1_of_3">400px please - target THIS DIV only </div>
  <div class="column_1_of_3">200 px</div>
  <div class="column_1_of_3">200 px</div>
 </div> <!-- closes .generic_row -->
 <div class="clear_me"></div>
 <div class="generic_row">
  <div class="column_1_of_3">200 px</div>
  <div class="column_1_of_3">200 px</div>
  <div class="column_1_of_3">200 px</div>
 </div> <!-- closes .generic_row -->
</div> <!-- closes #my_style --> 

If I had targeted div:first-child, then I'd be targeting the element containing the <h2>, which may not be what was actually intended.

So for a "grandchild" selector to work, you need three pieces:
something > otherthing > thirdthing

True. In my example, I was not explicitly targeting a "grandchild", because I thought that .generic_row:first-child was probably specific enough to avoid having to include another level in the selector. But I could have done this:

#my_style > .generic_row:first-child > .column_1_of_3:first-child

Which would achieve the same result, but would be restricted to withing the my_style element.

[Planet13]

Thanks for the explanation, Fotiman. that helps to clear things up for me.

Yeah, I see the issue where if someone were to come along and add content (such as an h2, or p, or a or... )it would cause problems.

thanks again for all the help.