Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select first list in table - CSS first-child?

maybe I'm barking up the wrong tree. I'm have a table with 6 columns, each with an ordered list in. I want them all to have a border except for the first list.

The site is in development here Basically though the html is

<tr>
 <td>
   <ol>
    <li>hello</li>
   </ol>
 </td>
 <td>
   <ol>
    <li>hello</li>
   </ol>
 </td>
 <td>
   <ol>
    <li>hello</li>
   </ol>
 </td>
</tr>

I thought the first-child of tr would work like so tr:first-child ol {style}

like image 329
morktron Avatar asked Feb 04 '10 03:02

morktron


People also ask

How do you target first child in CSS?

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

How do you select the first th in a table in CSS?

To select the very first <tr> element after a <caption> element, you can instead use: caption + tbody tr:first-child { ... }

How do you choose the first table of a child?

The :first-child selector is CSS2 and isn't supported on IE6. If IE6 is important then you'll need to give the first child a class you can select on instead. But the correct syntax is: tr td:first-child ol { ... }

How do I select immediate child in CSS?

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.


2 Answers

The :first-child selector is CSS2 and isn't supported on IE6. If IE6 is important then you'll need to give the first child a class you can select on instead. But the correct syntax is:

tr td:first-child ol { ... }

When you do:

tr:first-child ...

you're actually selecting <tr> elements that are first children. Also be aware that:

tr :first-child ...

is selecting the first children of table rows.

like image 94
cletus Avatar answered Oct 26 '22 01:10

cletus


That's not quite how it works, tr:first-child ol selects the tr that is the first child of its parent element. You must use the first-child pseudoclass on the td instead.

like image 30
ЯegDwight Avatar answered Oct 26 '22 00:10

ЯegDwight