CSS selector for table with particular TD

Question

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?

There is a similar post here that might help you http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — JasonGroulx, Oct 13 '12 at 17:32
Justed edited/specified the question: In my real HTML there are many tables all with *class pp*, and I want to select only certain ones, namely the ones containing data with td *class pppagetitle*. And, I can't edit the html, I'll need an external CSS.. — Kay, Oct 13 '12 at 18:44

score 2 · Answer 1 · answered Oct 13 '12 at 17:43

.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

score 1 · Answer 2 · answered Oct 13 '12 at 17:23

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).

score 0 · Answer 3 · answered Oct 13 '12 at 17:22

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>

score 0 · Answer 4 · answered Oct 13 '12 at 17:24

0

table.pp:first-child

supported in ie7+

answered Oct 13 '12 at 17:24

Jashwant

28,410
16
70
105

score 0 · Answer 5 · answered Oct 13 '12 at 17:24

0

You can use

table.pp:first-child

or

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

answered Oct 13 '12 at 17:24

sachleen

30,730
8
78
73

score 0 · Answer 6 · answered Oct 13 '12 at 17:25

0

You could use :first-child pseudo selector

answered Oct 13 '12 at 17:25

Kokers

1,818
14
19

score 0 · Accepted Answer · edited May 23 '17 at 12:04

@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>

CSS selector for table with particular TD

7 Answers7