Question

i have a script which generate the following HTML code :

<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>

<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>


<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>

I need to style the first cat class “Featured” ! i’m using jquery but i dont know hot to choose the right selector ?

i tried

jQuery(document).ready(function($){
    $(".table .cat:first").css("color","blue");
})

but i doesn’t the right job, it just select the first element with class=”cat”.

Answer 1

Change to:

$(".table").find(".cat:first").css("color","blue");

Also see this example.