Target first element of DIV using CSS

Question

I have a WYSIWYG editor inside of a table that is placed within a div, as such...

<div class="mydiv">
    <li>
        <table>My WYSIWYG</table>
    </li>
</table>

Inside my WYSIWYG there are more tables however I only want to target the first table, I understand I could assign a class to the table but thats not what I want.

I've tried using the following only it doesn't seem to work...

.mydiv li + table {width:100%;}

Answer 1

You need .mydiv li table:first-child.

More information.

:first-child works in IE7+ and all modern browsers.

An example.

---

.mydiv li + table isn't working for you because that matches something like this:

<div class="mydiv">
    <li></li>
    <table>My WYSIWYG</table>
</div>

---

Also note that there are few things wrong with your HTML:

<div class="mydiv">
    <li>
        <table>My WYSIWYG</table>
    </li>
</table>

• </table> at the end should be </div>.
• The div should be a ul, because li is not a valid child of div.

I've fixed these things in the demo above.