CSS-селектор для детей - нужно настроить таргетинг на дочерний элемент

Question

Я довольно новичок в селекторах css, но у меня есть структура html с дочерними элементами, которые мне нужно выбрать. Я пробовал несколько методов, но мне трудно выбрать только те элементы, которые мне нужны. Для предварительного ответа: HTML добавляется сторонним программным обеспечением, и я никак не могу его изменить. Это включает добавление классов в элементы.

Вот HTML-

<div class="smith-category-menu"> 
    <div> 
     <div> 
      <table></table> 
      <div> 
       <table></table> 
      </div> 
      <table></table> 
      <div> 
       <table></table> 
      </div> 
     </div> 
    </div> 
</div> 

мне нужно быть в состоянии выбрать следующее:

<div class="smith-category-menu"> 
    <div> 
     <div> 
      <table SEELCT1></table> 
      <div SELECT2> 
       <table SELECT3></table> 
      </div> 
      <table SELECT4></table> 
      <div SELECT5> 
       <table SELECT6></table> 
      </div> 
     </div> 
    </div> 
</div> 

Я попытался div.smith-category-menu div div table и div.smith-category-menu div div table:first-child, но они оба также отбора странных элементов.

Любая помощь была бы принята с благодарностью!

Answer 1

Вы можете использовать:

div.smith-category-menu>div>div * { 
    border:1px solid #aa0000; 
} 

See this demo.

Answer 2

Если это точная структура, вы можете использовать этот селектор:

div.smith-category-menu > div > div * { 
    ... 
} 

или вы можете редактировать HTML немного:

<div class="smith-category-menu"> 
    <div> 
     <div> 
      <table class="old-classes select-me"></table> 
      <div class="old-classes select-me"> 
       <table class="old-classes select-me"></table> 
      </div> 
      <table class="old-classes select-me"></table> 
      <div class="old-classes select-me"> 
       <table class="old-classes select-me"></table> 
      </div> 
     </div> 
    </div> 
</div> 

и использовать:

div.smith-category-menu .select-me { 
    ... 
} 

Answer 3

Используя только пространство в селекторе, как

div table { 
    ... 
} 

будут выбраны все элементы таблицы, которые находятся в потомкам Div, а не только его прямой потомок. Использование «>» вместо этого будет выбирать только прямых потомков.

div > table { 
    ... 
}