CSS селектор, чтобы получить самый глубокий элемент определенного класса в дереве HTML

Question

В моем HTML есть куча DIV-элементов, некоторые из которых имеют атрибут class, установленный в "rowLayout".Некоторые из этих DIV-рядов rowLayout могут быть вложены друг в друга.Я хочу определить селектор CSS, который нацелен только на самые глубокие DIV в этих вложениях.То есть я не хочу, чтобы какой-либо из DIVDSLowout DIVs содержал любые другие DIVRowLayout DIV.

<div id="a" class="rowsLayout">
  <div id="b" class="rowsLayout" />
  <div id="c" class="rowsLayout">
    <div id="d" class="rowsLayout" />
  </div>
</div>
<div id="e" class="rowsLayout" />

С этой структурой я хочу селектор, который будет нацелен на b, d и e.

Можно ли это сделать?

Answer 1

Вы можете использовать селектор jQuery .rowsLayout:not(:has(.rowsLayout)).

Однако по соображениям производительности это невозможно в CSS .

Ваш селектор зависит от потомков (или их отсутствия) элементов, на которые вы нацелены.
CSS разработан таким образом, что селекторы элемента всегда могут быть разрешены до того, как будут существовать дочерние элементы; это позволяет применять CSS при загрузке документа.

Answer 2

Нет.

Ваши варианты: выбрать их по идентификатору;добавить второй класс для этих листьев и выбрать по этому классу;используйте решение на основе JavaScript для установки соответствующего стиля (возможно, с использованием второго класса).

Answer 3

Взгляните на это:

div#b:first-of-type {
style here
}

Answer 4

Похоже, что это возможно, используя атрибут: dir или: lang.

Использование: lang предпочтительно в 2015 году, так как оно поддерживается большинством браузеров.

Пример:

.container {
  padding:20px;
}

:lang(ar) {
  direction:rtl;
}

:lang(en) {
  direction:ltr;
}

.container:lang(en) {
  background-color:blue;
}

.container:lang(ar)  {
  background-color:red;
}

.container .a:lang(en)   {
  background-color:orange;
}

.container .a:lang(ar) {
  background-color:yellow;
}

<div id="searchHere">
  
    <div lang=en>      
      <div class="container">
          l t r
        <div class=a>
              a
         </div>
      </div>
      
      <div lang=ar>
          <div class="container">
             r t l
            <div class=a>
              a
              </div>
          </div>        
        
          <div>
            <div class="container">
                r t l 
              <div class=a>
              a
              </div>
            </div>  
            
            <div lang=ar>
                <div class="container">
                   r t l
                  <div class=a>
                    a
                    </div>
                </div>  
            </div>
            
            <div lang=en>      
              <div class="container">
                  l t r
                <div class=a>
              a                  
              </div>
                
                <div lang=ar>
                  <div class="container">
                     r t l
                    <div class=a>
                      a                      
                      <div lang=en>      
                        <div class="container">
                          l t r
                          <div class=a>
                            a                  
                          </div>
                          <div>
                            <div>
                            
                              <div lang=en>      
                                <div class="container">
                                  l t r
                                  <div class=a>
                                    a                  
                                  </div>
                                </div>                      
                              </div>
                              
                              <div lang=ar>      
                                <div class="container">
                                  r t l
                                  <div class=a>
                                    a                  
                                  </div>
                                </div>                      
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>                      
                      </div>
                  </div> 
                </div>
              </div>            
            </div>
            
          </div>
        
      </div>
      
    </div>
  
</div>

Хотя пример демонстрирует это с помощью ltr и rtl, теоретически: lang можно заставить вести себя как самое глубокое совпадение, используя, например: lang (deepest-overrides-all), хотя, вероятно, это не так, где lang = deepest- overrides-all должно быть определено для элемента.

Answer 5

выберите их по ID

#b, #d, #e {
 /* styles here */
}

есть ли причина для всех повторяющихся имен классов? Вы можете обернуть все это в div #layout или сделать что-то еще ...

#layout div {
 /* styles */
}

вместо добавления этого имени класса в когда-либо div.

Answer 6

Почему бы не использовать: пусто?

JQuery Пустой

РЕДАКТИРОВАТЬ: он также работает как селектор CSS:

:empty { background-color: black; }

БОЛЬШЕ РЕДАКТИРОВАНИЯ:

:last-of-type почти работает, но почему-то получает «а». Смотрите мою скрипку.

http://jsfiddle.net/DUdVR/3/

Answer 7

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

div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {}

Может быть, есть лучший способ решить вашу проблему, что вы пытаетесь применить ко всем этим элементам?

Answer 8

Можете ли вы рассмотреть возможность добавления дополнительного класса, такого как "родительский", к родительским элементам?было бы проще и это "стандарт"