CSS селектор для первого заголовка самого высокого уровня?

Question

Как я могу выбрать первый из самых высоких h* элементы, присутствующие в DOM?

Что-то вроде

(h1, h2, h3, h4, h5, h6):first-of-ordered-set

Т.е. если дерево DOM имеет, в этом порядке, h2, h3, h1, h2, h1было бы выбрать первый h1;
и если DOM имеет h3, h3, h2, h2, h4было бы выбрать первый h2,
Давайте предположим h* элементы не являются вложенными.

Я подозреваю, что у CSS нет такой силы, верно?

Что-то потенциально пригодное для использования: https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/

Изменить: Почему я хочу это: система CMS принимает этот "первый верхний заголовок" в качестве заголовка документа (сообщение, страница, ...). Но это оставляет это на странице. И затем он показывает заголовок дважды - один раз как заголовок сообщения и один раз в теле. JavaScript удален Вершина h* уровень может отличаться.

Answer 1

Я нашел что-то. CSS не может этого сделать. Еще.

W3C разрабатывает новые функции:

.post-content:has(h1, h2, h3, h4, h5, h6)

Вместе с :not(), это позволит то, что мне нужно:

.post-content:has(h1) h1:first-of-kind,
.post-content:not(:has(h1)) h2:first-of-kind,
.post-content:not(:has(h1,h2)) h3:first-of-kind,
...

Есть подвох - :not() В настоящее время может быть только один "простой селектор". Если бы он поддерживал больше, то это было бы достижимо даже без :has,

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

Answer 2

Основная проблема в том, что у нас нет предыдущего селектора в CSS. Например, мы можем получить первый h2 но если позже мы найдем h1 у нас не может быть селектора, чтобы вернуться назад.

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

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}


.container {
 border:1px solid;
}

<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 3*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

Затем вы можете комбинировать с небольшим JS-кодом, чтобы сохранить только необходимый элемент:

$('h3:first-of-type').prevAll('h4').hide();
$('h2:first-of-type').prevAll('*:not(h1)').hide();
$('h1:first-of-type').prevAll('*').hide();

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

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

$('h3:first-of-type').prevAll('h4').addClass('initial');
$('h2:first-of-type').prevAll('*:not(h1)').addClass('initial');
$('h1:first-of-type').prevAll('*').addClass('initial');

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
  font-family:cursive;
  font-style:italic;
}


h1:first-of-type ~ *,
h2:first-of-type ~ *:not(h1),
h3:first-of-type ~ h4,
h1.initial,h2.initial,h3.initial,h4.initial{
  color:initial;
  font-family:initial;
  font-style:initial;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>