Target First Element Of Div Using Css

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

My WYSIWYG

Solution 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:

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

---

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

<divclass="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.

Solution 2:

Amazing what a quick google or stackoverflow search will do for you!

.mydivlitable:first-of-type { width:100% }

Solution 3:

Give this a go:

ulli:first-child table
{
    background: red;
}

The key here is :first-child. As @Warface notes, this isn't compatible with some browsers (pretty much only IE6), but all modern browsers support > just fine. See this.

Demo here.. Please note I've changed the markup to what is (a) correct and (b) what I think it should be.

Solution 4:

You are looking for the :first-child pseudo element

But be wary of browser support.

Share