eerste tabel selecteren

Door Ozzie PHP op 26-03-2013 14:10

2.401 views

Ola... is het mogelijk om met css het eerste element van iets te selecteren?

Ik heb een tabel met daarin meerdere tabellen. Hieronder een voorbeeldje met een tabel met daarin 1 tabel. Nu wil ik een border zetten om alleen de buitenste tabel. Kan dat zonder dat ik die tabel een id hoef te geven? Ik heb het geprobeerd met table:first-child en table:first-of-type, maar dan pakt ie ook de binnenste tabellen mee. Iemand een idee?



<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            foo bar
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Joakim Broden

26-03-2013 14:12

> table??

Ozzie PHP

26-03-2013 14:18

Je bedoelt body > table neem ik aan? Dat werkt inderdaad... ik zat ff te moeilijk te denken :)

Maar als je nu meerdere tables onder elkaar hebt staan en je wilt alleen de 1e selecteren? Dus:


<table> ... </table>
<table> ... </table>
<table> ... </table>

Donny Wie weet

26-03-2013 14:30

heb je al nth:child geprobeerd?

Ozzie PHP

26-03-2013 14:32

Nee, niet geprobeerd. De oplossing van HJ werkt op zich wel, maar ik vroeg het me af. Was eventjes in de war :-)

Wouter J

26-03-2013 14:45

Merk op dat ::first-child alleen het eerste child selecteert, gebruik ::first-of-type om het eerste table element te selecteren.

Ozzie PHP

26-03-2013 15:03

Oké thanks!

Ward van der Put

26-03-2013 15:13

Je kunt hier de aard van de relatie ook omkeren met de breder ondersteunde adjacent sibling selector: table + table {...} geldt voor elke tabel die volgt op een andere tabel en dus niet voor de eerste tabel.

N K

26-03-2013 15:15

Ik weet niet precies wat je wilt maar kan je dan niet beter met bijv. Jquery werken?
nth:child etc. lijkt me niet echt compatible met veel IE versies.

Wouter J

26-03-2013 15:17

jQuery voor zoiets. Ach ja, doe maar... :(

Even serieus, dit werkt gewoon met IE9 en hoger en om hiervoor nou 24kb in te gaan laden. Mij niet gezien!

Ozzie PHP

26-03-2013 15:19

@Ward: thanks voor de tip!

@NK: het is al opgelost ;)

@Wouter: inderdaad, gewoon met css :)

Reageren

Inloggen om te reageren