css-запрос для выбора элемента div, который не содержит элемент таблицы

Question

Мне нужно выбрать элемент div вне таблицы ie.text ' Обязательный адрес '

Если я использую main div [itemprop = "address"] я получаю все 8 адресов

Я хочу однозначно идентифицировать требуемый div без таблицы в качестве родительского

Html:

<main>
  <div>
    <div itemprop="address">Required Address</div>
    <table>
      <tbody>
        <tr><td>
          <div itemprop="address">Address1</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address2</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address3</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address4</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address5</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address6</div>
        </td></tr>    
        <tr><td>
          <div itemprop="address">Address7</div>
        </td></tr>
      </tbody>
    </table>
  </div>
</main>

Answer 1

В качестве альтернативы вы можете установить (в данном случае) цвет для общего div и откатить его для тех div, которые находятся внутри тега таблицы.

div[itemprop="address"] {
  color: red;
}

table div[itemprop="address"] {
  color: initial;
}

<main>
  <div>
    <div itemprop="address">Required Address</div>
    <table>
      <tbody>
        <tr>
          <td>
            <div itemprop="address">Address1</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address2</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address3</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address4</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address5</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address6</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address7</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</main>

Answer 2

Вы должны использовать id для этого, если это не вариант для вашего варианта использования.

main div > div[itemprop="address"] {
  // some code
}

Answer 3

Используйте оператор >. Стиль будет применяться только к div, если он имеет родительский div и также main как родительский тег.

main > div > div[itemprop="address"] {

color: blue

}

<main>
  <div>
    <div itemprop="address">Required Address</div>
    <table>
      <tbody>
        <tr><td>
          <div itemprop="address">Address1</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address2</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address3</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address4</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address5</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address6</div>
        </td></tr>    
        <tr><td>
          <div itemprop="address">Address7</div>
        </td></tr>
      </tbody>
    </table>
  </div>
</main>

Answer 4

Вы можете использовать дочерние селекторы здесь:

doc.select("main > div > div[itemprop='address']");