CSS для выбора ближайшего потомка?

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

<div class="foo"> <!-- if we're inside this -->
  <div>
    <br />
    <div class="bar"> <!-- match this -->
      <div class="bar"> <!-- but not this -->
        <div class="bar"> <!-- or this -->
        </div>
      </div>
    </div>
    <div class="bar"> <!-- I don't really care whether we match this -->
    </div>
  </div>
</div>

то есть то, что бы выбрать первое .bar в любом .foo (независимо от того, сколько дочерних или родственных элементов находится между ними), но не второй или третий .bar.

7
css css-selectors

3 ответов

вот мой hacktastic ответ:http://jsfiddle.net/thirtydot/gqJdP/2/

/*repeat for as many levels as there could be*/
.foo > .bar,
.foo > :not(.bar) > .bar,
.foo > :not(.bar) > :not(.bar) > .bar {
    border-color: blue;
}
.bar {
    border: 1px solid red;
    padding: 10px;
}

цитируя себя из комментария:

мое предложение жизнеспособно, хотя и неприятно,если вы можете установить верхний предел на возможное количество родителей между .foo и .bar вы хотите, чтобы соответствовать. Даже если вам пришлось повторить селектор (допустим) в 10 раз, это не так уж плохо.

13

нет, нет никакого способа сделать то, что вы просите полностью используя только CSS. Вы можете выбрать nth-child или nth-of-type, а не the-nth-item-matching-this-selector.

в качестве "доказательства" просмотрите список доступных селекторов CSS3 (который охватывает все возможности CSS1 и CSS2.1):
http://www.w3.org/TR/selectors/

вам нужно будет использовать JavaScript (на клиенте) или манипуляции на стороне сервера (например, аннотирование первого такого элемента специальным класс.)

редактировать: на основе вашего редактирования, вы можете сделать:

.foo .bar      { font-weight:bold; color:red }
.foo .bar .bar { font-weight:normal; color:black }

т. е. вам нужно явно "отменить" стиль, примененный к предкам, которые будут унаследованы. Это "хрупкое" - если вы меняете стиль на предке, вам нужно обязательно изменить значение соответствующего правила" переопределения", но эффективное.

и, если @thirtydot опубликует свой Хак в качестве ответа, мы все можем принять это тоже.

хотя вероятно, не помогает, обратите внимание также, что вы можете достичь этой цели С XPath.

2

Это должно получить только первый дочерний элемент .foo:

.foo > .bar

и не выбирайте дальше по цепочке.

-3