Selecting divs within td

Question

If I have couple <div>s within a <td>, can I select each one?

For example i want to make the first one float left and the second float right. is it possible using just CSS?

.divE:first-child { float:left; }
.divE:last-child  { float:right; }

HTML

<table id="myTbl" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <div class="red">asdasd</div>
        <div class="divE"></div>
        <div class="divE"></div>
        content
        </td>
    </tr>
</table>

For the first child of an specific class, you could check http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name. However, if all your table cells will include a similar structure, you could try nth-child(n), as in the answers below. — Adonais, May 04 '12 at 21:44

score 1 · Answer 1 · answered May 04 '12 at 21:34

1

You can give this a try:

:nth-child(2)

but you're working with CSS3, so be sure to check your browser compatibility depending on who needs to use your site:

http://caniuse.com/#search=nth

answered May 04 '12 at 21:34

Chords

6,720
2
39
61

score 1 · Accepted Answer · answered May 04 '12 at 22:06

Yes it is :)

You can set the .divE class to float left by default, and then you can by using the adjacent sibling selector define, that when an div of the divE class immediately follows another div of the divE class, it should float right like this:

.divE {
    float:left;
}

.divE + .divE {
    float: right !important;
}

But isn't it easier just to give the divs an id each, and then set the floats to each? Or just apply a .floatRight or .floatLeft class to the divs, and then change the floats of these classes? In this way you could reuse the classes.

If you changed your HTML to:

<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" width="25%">
    <div class="red">asdasd</div>
    <div class="divE floatLeft"></div>
    <div class="divE floatRight"></div>
    content
    </td>
</tr>

And add CSS like this:

.floatLeft {
float: left;
}

.floatRight {
float:right;
}

score 0 · Answer 3 · answered May 04 '12 at 21:34

:nth-child is magical.

td div.divE {
    float: left;
}

td div.divE:nth-child(2n) { /* all even divs */
    float: right;
}

/* or just use "even" */
td div.divE:nth-child(even) {
    float: right;
}

Works in all real browsers. Meaning, no IE8 and under.

More info: http://css-tricks.com/how-nth-child-works/

score 0 · Answer 4 · answered May 04 '12 at 21:35

in this case :first-child would have to be the first element under <td> for that selector to work (which is instead <div class="red"> so .red:first-child would work)

you can instead use :nth-child

.divE:nth-child(2) { float:left; }
.divE:nth-child(3) { float:right; }

score 0 · Answer 5 · answered May 04 '12 at 21:43

0

I've added a div element to html, it works.

css

.divE:last-child  { color:red; }
.divE:first-child { color:blue; }

html

<td>
<div class="red">asdasd</div>
<div><div class="divE">blue</div></div>
<div class="divE">red</div>
content
</td>

answered May 04 '12 at 21:43

Rckt

185
1
3
11

score 0 · Answer 6 · answered May 04 '12 at 21:54

0

Using a combination of the :first-child selector and sibling selector allow you to target the second div like so:

.red{
    float: left;
}
.divE{
    float: left; //this is for the second .divE
}
.red + .divE{
    float: right; //this is for the first .divE
}

Such a solution works from IE7 up.

answered May 04 '12 at 21:54

skip405

6,119
2
25
28

it's not even a combination, simply `sibling` – skip405 May 04 '12 at 22:01

Selecting divs within td

6 Answers6