Question

I have a table that looks something like this.

EDIT – I re-extracted code. I think the question makes more sense now. (Answers may not)

  <div class="view view-latest-news-view view-id-latest_news_view view-display-id-latest_news_block_1 view-dom-id-1">
     <div class="views-admin-links views-hide">
     </div>
  <div class="view-content">
  <table class="views-view-grid">
     <tr class="row-1 row-first">
        <td class="col-1">
        </td>
     </tr>   
  <table>
  </div>
</div>   

How can I address only the “views-view-grid” tables that are contained by the “view-latest-news-view” class? Something like this…

.view-latest-news-view table.views-view-grid  {
    border-collapse:separate;
    border: 1px solid red;
}

** END EDIT **

Thanks!

** ANSWER: **
this works… but maybe I could be more specific?

.view-latest-news-view .views-view-grid  {
    border-collapse:separate;
    border: 1px solid red;
}

Answer 1

This does not work because <table class="views-generic-grid"> is not contained with in any element with the class views-admin-links. (You open the div and then immediately close it, so it has no children.)

So when you say this:

How can I address only the “views-generic-grid” tables that are contained by the “views-admin-links” class?

The answer is you can’t, because there are no “views-generic-grid” tables contained in elements with the “views-admin-links” class.

Either extend the div to surround the table, or pick a different selector than .views-admin-links.