CODEWITHSUNDEEP
css
Kay
Kay

Reputation: 2854

CSS selector for table with particular TD

I have two tables with same class

<table class='pp' >
  <tr class='pp'>
    <td class='pppagetitle'>A Table</td>
  </tr>
</table>
<table class='pp' >
  <tr class='pp'>
    <td class='ppinstance'>Another Table</td>
  </tr>
</table>

but want to select only the one with td class pppagetitle (!) - any pointers?

Upvotes: 2

Views: 1772

Answers (7)

Kay
Kay

Reputation: 2854

@Jason Groulx's pointer on a previous post with a very elaborate answer regarding this issue solved things for me:

<style type="text/css">
.pp > .pppagetitle {
    border: 1px solid red;
}
</style>

<table class='pp' >
  <tr class='pp'>
    <td class='pppagetitle'>A Table</td>
  </tr>
</table>
<table class='pp' >
  <tr class='pp'>
    <td class='ppinstance'>Another Table</td>
  </tr>
</table>

Upvotes: 0

Rene Koch
Rene Koch

Reputation: 1291

.pp:nth-child(1){background:green;}

But this isn't well supported (doesn't work in IE8 and below)

Alternatively put the tables in a container and use 

:first-child

Example:

<style>
    .container > .pp:first-child{background:green;}
</style>
<div class="container">
    <table class="pp"></table>
    <table class="pp"></table>
</div>

for more documentation: Quirksmode.org

Upvotes: 2

Kokers
Kokers

Reputation: 1828

You could use :first-child pseudo selector

Upvotes: 0

sachleen
sachleen

Reputation: 31121

You can use 

table.pp:first-child

or

table.pp:nth-of-type(1)

Upvotes: 0

Jashwant
Jashwant

Reputation: 28995

table.pp:first-child

supported in ie7+

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

My first thoughts, assuming they share a parent, would be:

table.pp:first-child

JS Fiddle demo.

But this will, and can, only select the particular table (with that class) if it's the first-child of its parent element.

There is no :first-of-class() selector (unfortunately).

Upvotes: 1

BurebistaRuler
BurebistaRuler

Reputation: 6509

You can add another class and select only the table desired:

<table class='pp' >
  <tr class='pp'>
    <td class='pppagetitle anotherClass'>A Table</td>
  </tr>
</table>
<table class='pp' >
  <tr class='pp'>
    <td class='ppinstance'>Another Table</td>
  </tr>
</table>

Upvotes: 0

Related Questions